React，调用另一个组件中的函数答案

【问题标题】：React, call function in another componentReact，调用另一个组件中的函数
【发布时间】：2023-03-10 03:39:01
【问题描述】：

我有一个演示 here

它是一个简单的购物车应用程序，我在其中列出产品，并通过一个按钮将产品添加到列表中。

购物车和添加到购物车的功能与产品所在的组件不同。

如何从单击按钮的 App 组件中调用 addToCart 函数。

const handleClick = (
    e: React.MouseEvent<HTMLInputElement, MouseEvent>,
    item: IProduct
  ) => {
    e.preventDefault();
    // Call the add to cart function
    Cart.addToCart(item);
  };

【问题讨论】：

你可以创建一个函数而不是回调作为属性，不要把你的列表放在购物车里

标签： reactjs

【解决方案1】：

你必须在 App 组件（父）中实现 addToCart 函数，并将该函数作为 props 传递给 Cart 组件（子），购物车状态也应该在 App 组件中处理。

实现：https://stackblitz.com/edit/react-ts-gf9r64?file=index.tsx

祝你好运！

【讨论】：

【解决方案2】：

您可以在parent 中添加该函数并将其作为props 传递给子级，这样它也可以访问addToCart 函数。

Stackblitz：https://stackblitz.com/edit/react-ts-qdpl45?file=Cart.tsx

【讨论】：