데이터 전달 중

Question

간단한 온라인 상점을 개발했습니다. js.file에서 다른 js로 데이터를 전달/제출하고 싶습니다. 첫 번째 js 파일에는 항목 표시가 있습니다. 그럼 난 테이블을 포함 cart.js에 데이터 항목을 전달하고 싶습니다. 내가 데이터를 정의하는 방법

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

(= "bagiak tidur", "가격"= "12000", "수량", "제품"= "1") 내가 테이블에 전달하려는? 버튼을 누르면 테이블에 데이터가 입력됩니다. 여기 내 테이블이 있습니다.

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

i 개발 된 UI 웹 사이트. 그래서 그것은 어떤 데이터베이스와도 연결되지 않습니다. 모든 데이터는 UI 수준에 있습니다. 내가 무슨 뜻인지 알기를 바랍니다. 나쁜 영어로 죄송합니다.

Answer 1

반응에서 데이터는 소품을 통해 부모 구성 요소에서 하위 구성 요소로 전달 될 수 있습니다. 귀하의 경우, 나는 같은 수준의 구성 요소 또는 형제 구성 요소간에 데이터를 전달하려고하는 것으로 가정합니다. 어느 것이 까다로울 수있는 콜백을 사용하거나 데이터 흐름을 돕는 Redux와 같은 상태 관리 라이브러리를 조사해야 할 수도 있습니다.

Answer 2

데이터를 다른 구성 요소로 전달하려는 경우. 이 경우 이러한 구성 요소는 부모/자식입니다. 소품을 사용하여 데이터를 전달할 수 있습니다.

상위 구성 요소에서이 세 가지 소품으로 데이터를 전달할 수 있습니다.

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