javascript - 我如何将功能 react 组件传递给函数？

Question

所以我在这里试图实现的是将整个组件存储在父组件的数组中，父组件使用其索引呈现数组中的特定组件，例如:

export const Test = () => {
 const [components, setComponents] = useState([
   <Order key={1} />,
   <Order key={2} />,
   <Order key={3} />,
 ]);
 const [index, setIndex] = useState(0);
 return (
   <div>
     <button onClick={() => setIndex((old) => (old + 1) % components.length)}>
       change
     </button>
     {`page ` + index}
     {components[index]}
   </div>
 );
};

const Order = () => {
 const [someState, setSomeState] = useState(1);

 return (
   <div>
     <button onClick={() => setSomeState((old) => old + 1)}>
       {someState}
     </button>
   </div>
 );
};

当我更改一个项目的状态然后循环浏览这些项目然后返回到我更改其状态的项目时我发现它没有更新

我发现数组中的组件(在测试组件中)没有更新，我不知道如何更新它

我不想做的是将订单项的状态存储在父级中并将其作为 Prop 传递(因为让它工作会很痛苦)

Answer 1

  const App = ({ flag }) => {
    if (flag) <Order />
    return null
  }

我给你举个例子，这样我就可以解释你的情况可能会发生什么。如果标志从 true 变为 false，则 App 变为空白。但是 Order 会怎样？已经卸载了，为什么？因为当 React 比较前一个场景和当前场景时，它注意到不再有这样的 Order 了。那么您如何看待 Order 组件(称为纤程)的内存？

我猜答案是，内存会被删除，并会被收集起来以备将来使用。

现在回到您的案例，您正在使用 id 切换到不同的组件。但从理论上讲，每个组件的行为应该与我的示例非常相似。

注意:要注意的是，如果您想使用数组，那很好，但是所有组件都必须始终呈现，您可以隐藏它们，但不能卸载它们中的任何一个。