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

Question

我已阅读其他帖子。

我需要将 cartLength 变量传递到shopbanner.js组件中，它需要从shop.js

shop.js

export default function Shop() {

var cartLength = cart.length;

return (

    ...

  );

}

shopbanner.js

import {cartLength} from '../pages/shop.js'

export default function ShopBanner() {

  return ( 

    <p>{cartLength}</p>

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

  );

}

事实证明我把事情变得过于复杂了，谢谢你们的回答！

Answer 1

您可以将购物车长度作为参数：export default function ShopBanner(cartLength) {&nbsp; return (&nbsp;&nbsp; &nbsp; <p>{cartLength}</p>&nbsp; &nbsp; <img src="/basket.png"/>&nbsp; );}然后你可以像道具一样使用它：<ShopBanner cartLength={cart.length}>

Answer 2

您可以使用 React 的 props 参数。向 ShopBanner 函数添加 props 参数。然后你可以简单地执行以下操作：<ShopBanner&nbsp;cartLength=....&nbsp;/>然后您可以在 ShopBanner 的代码中将 cartLength 引用为 props.cartLength。

Answer 3

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