我可以避免将道具发送到 child 并返回吗？

Question

我有一个数组 objects:

const arrayOfObjects = [
    { name: 'Sushi', price: 10 },
    { name: 'Pizza',price: 5 }
  ];

我正在通过它们进行映射以生成 child 个组件。

const List = arrayOfObjects.map(item => (
    <Child name={item.name} price={item.price} propFunc={parentFunc}></Child>
  ));

在 parent 组件的函数中，我需要数组中的值以及 child 组件的输入值。

const parentFunc = (arg1, arg2) => {
    setItems(prev => {
      return [...prev, { meal: arg1, amount: arg2 }];
    });
  };

在 Child 组件中我没有使用道具，只是将它们发回：

const Child = props => {
  const childFunc = event => {
    const var1 = event.target.value;
    const var2 = props.name;
    const var3 = props.price;

    props.propFunc(var1, var2, var3);
  };
};

这似乎是多余的。我可以访问数组中的值而不用来回发送它们吗？

我正在寻找一种不使用其他 React Hooks 且不改变数组的解决方案。

Answer 1

您可以通过为每个 child 创建一个函数来做到这一点，这些函数知道对应的项目：

const list = arrayOfObjects.map(item => (
  <Child propFunc={(event) => parentFunc(event, item.name, item.price))} />
));

// ...

const Child = props => {
  const childFunc = event => {
    props.propFunc(event.target.value);
  };
};

我可以避免将道具发送到 child 并返回吗？

Can I avoid sending props to child and back?

reactjs

use-state

react-props