如何將一個組件數據設置到另一個組件

Question

我有 2 個組件。 一個是 header 組件，另一個是 home 組件。

我已經在 header 組件上創建了購物車。 但是在主組件中，當我單擊 addToCart 按鈕時，應該在購物車上更改該值。

header.jsx

const Header = () => {
  const handleSelect = (e) => {
    console.log(e);

  }
    return (
      <div className="container">
        <div className="filelist">
          <div className="add_to_cart fa fa-shopping-cart fa-2x"><span className="item_in_cart">{}</span></div>
        </div>
        </div>
    )
}
export default Header;

我想在 home 組件中編寫邏輯，例如當我們單擊 addToCart 時該值應顯示在購物車中。 但是我在 header 組件中編寫了購物車邏輯。 主頁.jsx

const DisplayDataAtHome = () => {
   const json_data=[{
    "merchant_id": 1,
    "medium_egg": 104,
    "small_egg": 100,
    "desi_egg": 110,
    "d_keshor_egg": 98
  }, {
    "merchant_id": 2,
    "big_egg": 90,
    "medium_egg": 104,
    "desi_egg": 112,
    "d_keshor_egg": 100
  }]
  const AddToCart=(e)=>{
    alert(e.target.value)
    var element=document.getElementsByClassName('addToCart');
    element[0].classList.add("hideIt");
  }
    return (
      <>
      <Header />
      <table className="outerdiv" style={{align:'center'}}>{
      json_data.map((val, i)=>(
        <>
        {
            val['big_egg']  &&  
            <div className="innerDiv">
                
                   <img src={bigegg}></img>
                   <p align="left">Big Egg</p>
                   <p align="left">weight: 500gm.</p>
                   <p align="left">{"₹"+val.big_egg+"/-"}<button className="addToCart" onClick={e=>AddToCart(e)}>AddToCart</button></p>
                </div>
        }
        {
            val['desi_egg'] && 
            <div className="innerDiv">
                
                    <img src={smallegg}></img>
                    <p align="left">Small Egg</p>
                    <p align="left">weight: 500gm.</p>
                    <p align="left">{"₹"+val.desi_egg+"/-"}<button>ADD</button></p>
                </div>
        }
        </>
    ))
      }
      </table>
      </>
    )
}
export default DisplayDataAtHome;

我希望每當我單擊 addToCart 按鈕時，購物車值應該更改，它位於 header 組件中。 我怎么解決這個問題？

Answer 1

您可以像這樣將一個組件數據傳遞給另一個組件。

在 home.jsx 中： 例如：如果我們需要將總項目數傳遞給 header，請保留 state 中的值（例如：cartTotal）。 調用 AddToCart 時，添加到 'cartTotal' state 值。

例如：在 AddToCart() 中：

AddToCart = () => {
    this.setState ({ cartTotal: cartTotal + 1 });
}

然后，您需要將值作為道具從 home.jsx 傳遞到 header.jsx，如下所示：

<Header cartTotal={this.state.cartTotal} />

在 header.jsx 中顯示總值如下：

<div className="add_to_cart fa fa-shopping-cart fa-2x">
    <span className="item_in_cart">
        {this.props.cartTotal}
    </span>
</div>

與此類似，您可以修改代碼以匹配您的實際邏輯，以傳遞項目列表，完全使用與此示例代碼相同的邏輯。