在 React Typescript 中发送道具

Question

我试图将挂钩推车发送到另一个组件，我不明白您如何在 typescript 中发送道具。 我只是想在侧边栏组件中显示购物车数据。 提前致谢。

export type ItemType = {
      id: number;
      name: string;
      price: number;
      content: string;
      image: string;
      amount: number;
    }

    const Cardsitem = ({ id, name, image, content, price, amount }: ItemType) => {
      
      const [cart, setCart]:any[] = useState([]);
    
      const addToCart = (product: any) => {
        setCart([...cart, {...product, name, price, amount: 1}]);
        console.log(cart)
      };
    
      return (
        <Card>
          <CardInfo>
            <img src={image}></img>
          </CardInfo>
    
          <CardOverview>
            <span style={{ marginBottom: -5, fontSize: 20 }}>{name} </span>
            <p style={{ fontSize: 15 }}>
              {content} <br /> {price},-{" "}
            </p>
            <Button onClick={() => addToCart(product)}>Buy</Button>
          </CardOverview>
        </Card>
      );
    };

所以我试图将购物车 state 发送到另一个名为 sidebar.tsx 的组件。

        const Sidebar = ({ show }: IProps) => {
  return (
      {...show ? <SidebarContainerActive>
        // Want to display the cart products here 
        </SidebarContainerActive> : <SidebarContainer/>}
  );
};

Answer 1

看起来您的问题是Sidebar不是您通过useState挂钩设置card state 的组件的子项。

您只能将 props道具传递给孩子。 因此，您可以在这里做的一件事是将 state 向上提起。

因此，如果您的 App 结构当前可能如下所示，并且您的card state 是在Card组件中定义的（例如箭头所在的位置），则您无法方便地将card state 传递给Sidebar组件。

                      App.tsx
                     /       \
               Home.tsx     Sidebar.tsx
                   /   
-->          Card.tsx

但是如果你把你的const [cart, setCart]:any[] = useState([]); state 进入层次结构的更高层（在此图中，例如App.tsx我放箭头的位置），然后您可以将cart道具向下传递给Card组件以及Sidebar组件：

-->                   App.tsx
                     /       \
               Home.tsx     Sidebar.tsx
                   /   
             Card.tsx