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

Question

I have read through the other posts.

I need to pass the cartLength variable into the shopbanner.js component, it needs to be imported from 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"/>
  );
}

Turns out I was way overcomplicating things thank you for your answers guys!

Answer 1

You can take cart length as an argument:

export default function ShopBanner(cartLength) {
  return ( 
    <p>{cartLength}</p>
    <img src="/basket.png"/>
  );
}

Then you can use it like a prop:

<ShopBanner cartLength={cart.length}>

Answer 2

You can use React's props argument.
Add a props argument to the ShopBanner function. Then you can simply do:

<ShopBanner cartLength=.... />

And then you can refrence the cartLength as props.cartLength in the ShopBanner's code.

Answer 3

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