React 将数据传递到另一个组件

Question

我已阅读其他帖子。我需要将 cartLength 变量传递到shopbanner.js组件中，它需要从shop.jsshop.jsexport default function Shop() {var cartLength = cart.length;return (    ...  );}shopbanner.jsimport {cartLength} from '../pages/shop.js'export default function ShopBanner() {  return (     <p>{cartLength}</p>    <img src="/basket.png"/>  );}事实证明我把事情变得过于复杂了，谢谢你们的回答！

Answer 1

您可以将购物车长度作为参数：

export default function ShopBanner(cartLength) {

  return ( 

    <p>{cartLength}</p>

    <img src="/basket.png"/>

  );

}

然后你可以像道具一样使用它：

<ShopBanner cartLength={cart.length}>

Answer 2

您可以使用 React 的 props 参数。
向 ShopBanner 函数添加 props 参数。然后你可以简单地执行以下操作：

<ShopBanner cartLength=.... />

然后您可以在 ShopBanner 的代码中将 cartLength 引用为 props.cartLength。

Answer 3

您应该将其作为 props 或通过某种状态管理器传递。