Daten in Reaktion übergeben

Question

Ich habe einen einfachen Online-Shop entwickelt. Ich möchte Daten von einer js.file an eine andere js übergeben/senden. Die erste js-Datei enthält die Anzeige des Elements. dann möchte ich das Datenelement an cart.js übergeben, das eine Tabelle enthält.

<section className="products"> 

     <div className="product-card"> 
      <div className="product-image"> 
       <img src={ bagiak }/> 
      </div> 
      <div className="product-info"> 
       <h5>Bagiak Tidur</h5> 
       <h6>Rp.12000</h6> 
       <p>Masukkan Jumlah yang dibeli : </p><input type="number"/><br/><br/> 
       <a href="/keranjang" className="button is-success btn-product"><i className="fa fa-shopping-cart"></i>&nbsp;&nbsp;Beli</a>&nbsp;&nbsp; 

      </div> 
     </div> 
</section> 

, wie ich Daten ("Produkt" = "bagiak tidur", "Preis" = "12000", "Menge" = "1") definieren, die ich zu Tisch übergeben möge? und wenn ich auf die Schaltfläche drücke, werden die Daten in die Tabelle eingegeben. Hier ist mein Tisch.

<table id="cart" className="table table-hover table-condensed"> 
         <thead> 
          <tr> 
           <th styles="width:50%" className="text-center">Nama Produk</th> 
           <th styles="width:10%" className="text-center">Harga</th> 
           <th styles="width:8%" className="text-center">Jumlah</th> 
           <th styles="width:22%" className="text-center">Subtotal</th> 
           <th styles="width:10%" className="text-center">Action</th> 
          </tr> 
         </thead> 
         <tbody> 
         {this.state.json.map((data, i) => { 
          var subtotal = data.harga*data.jumlah; 
          const id = data.id; 

         return (
          <tr key={i}> 
           <td data-th="Product"> 
            <div className="row"> 

             <div className="col-sm-10"> 
              <h4 className="nomargin">{data.nama_barang}</h4> 
             </div> 
            </div> 
           </td> 
           <td data-th="Price">Rp.{data.harga}</td> 
           <td data-th="Quantity">{data.jumlah} </td> 
           <td data-th="Subtotal" className="text-center">Rp.{subtotal}</td> 
           <td className="actions" data-th=""> 
            <button onClick={() => this.handleDelete(id) } className="button is-danger"><i className="fa fa-trash-o"></i></button>        
           </td> 
          </tr>); 
         })} 
         </tbody> 
         <tfoot> 
          <tr> 
           <td><Link to ="/" className="button is-warning"><i className="fa fa-angle-left"></i> Lanjut Berbelanja</Link></td> 
           <td></td> 
           <td>Total </td> 
           <td className="hidden-xs text-center"><strong>Rp. { total }</strong></td> 
           <td><Link to ="/transaksi" className="button is-success">Checkout <i className="fa fa-angle-right"></i></Link></td> 
          </tr> 

         </tfoot> 
        </table> 

Ich entwickelte UI-Website. Es verbindet sich also nicht mit irgendeiner Datenbank. Alle Daten sind nur auf UI-Ebene. Ich hoffe du weißt was ich meine. Entschuldigung für mein schlechtes Englisch

Answer 1

In Reaktion können Daten von Eltern zu Kind-Komponente über Requisiten übergeben werden. In Ihrem Fall nehme ich an, dass Sie versuchen, Daten zwischen Komponenten der gleichen Ebene oder Geschwisterkomponenten zu übergeben. Entweder können Sie Callbacks verwenden, die schwierig sein können, oder Sie müssen in die Zustandsverwaltungsbibliothek wie Redux schauen, die beim Datenfluss hilft.

Answer 2

Wenn Sie Daten einer Komponente an eine andere Komponente übergeben möchten. In diesem Fall sind diese Komponenten Eltern/Kind. Sie können die Daten mit Requisiten übergeben.

In Ihrer übergeordneten Komponente können Sie Ihre Daten mit diesen drei Requisiten übergeben.

constructor(props){ 
super(props); 
this.state = { 
data = [{ 
    "id":1, 
    "name":'sampleName' 
}, 
{ 
    "id":2, 
    "name":'sampleName2' 
}] 
}; 

} 
render(){ 
    let myPropData="string"; 
    return(
     <ChildComponent passData={this.state.data} /> 
    ); 
} 

In Ihrer Kindkomponente wird die Rendermethode so aussehen.

render(){ 
let propData = this.props.passData; 
return(
//Do whatever you want. Display in table or grid etc... 
); 
}