我有一个重新定位组件的画廊。我希望它在更改子组件时重新定位组件:添加、切换。

我正在听 children 使用 useEffect 钩子(Hook):

useEffect(() => {
    items = [...layout.current.childNodes].filter(
      (el) => el.nodeType === 1 && +getComputedStyle(el).gridColumnEnd !== -1,
    );
    console.log('>>> Gallery: children changed!', children.props.items);
    setLayout();
  }, [children]);

至于父我有以下布局:

<Gallery>
      <Cards items={pageGalleryItems} />
</Gallery>

Cards 组件显示一些项目信息，如价格、名称。我注意到，当我更改设置以显示不同的货币时，我希望卡片显示不同的货币，仅此而已，但画廊认为我的子节点已更改并重新定位所有元素。这让我怀疑使用 useEffect 监听子组件是否合适？或者如何监听子节点被正确更改:替换、添加？

最佳答案

useEffect 在第一次渲染以及状态/ Prop 更改时触发。

因此，如果您希望检测子组件的变化，请尝试使用一种通过 Prop 提供 child 内容的状态。

一旦你的 useEffect 被触发，一个新的渲染被创建并且 children 从修改后的状态接收他们的新内容。

我建议您熟悉 lifting-up states 的概念

https://stackoverflow.com/questions/71601225/