データを受け渡す

Question

私は簡単なオンラインショップを開発しました。私は、js.fileから別のjsにデータを渡したい。最初のjsファイルにはアイテムの表示が含まれています。テーブルを含むcart.jsにデータ項目を渡したいと思います。私は、テーブルに渡したい、私は（ "製品" = "bagiak tidur"、 "価格" = "12000"、 "数量" = "1"）のデータを定義する方法

<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> 

？私がヒットボタンを押すと、テーブルにデータが入力されます。 私のテーブルはここにあります。

<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> 

私はUIウェブサイトを開発しました。それで、どのデータベースとも接続しません。すべてのデータはuiレベルにあります。私はあなたが何を意味するかを知って欲しい私の悪い英語のために申し訳ありません

Answer 1

反応では、データは親から子コンポーネントに小道具を介して渡すことができます。あなたの場合は、私は、あなたは同じレベルのコンポーネントまたは兄弟コンポーネント間でデータを渡そうとしていると仮定しています。あなたが難しいかもしれないコールバックを使うか、データフローを助けるReduxのような状態管理ライブラリを調べなければならないかもしれません。

Answer 2

データを別のコンポーネントに渡す場合。この場合、これらのコンポーネントは親子です。あなたは小道具でデータを渡すことができます。

親コンポーネントでは、これらの3つの小道具でデータを渡すことができます。

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} /> 
    ); 
} 

あなたの子コンポーネントのレンダリングメソッドでは、次のようになります。

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