Javascript 父组件首先获得更新的Redux状态，但需要来自子组件的更新引用。建议的最佳做法？

我有一个基于Redux存储中的数组动态填充元素的容器。下面是一个代码示例

const state = {
  elements: [
    {
      id: "element_1",
      attrs: {
        width: 200,
        height: 100,
        backgroundColor: "#ff0000"
      }
    },
    {
      id: "element_2",
      attrs: {
        width: 50,
        height: 300,
        backgroundColor: "#00ffff"
      }
    }
  ]
};

// Elements Container (elements coming from Redux)
const ElementsContainer = ({ elements, elementsRefs }) => (
  <>
    {elements.map(element => (
      <div
        key={element.id}
        ref={el => {
          elementsRefs.current[element.id] = el;
        }}
      />
    ))}
  </>
);

// Parent container (elements coming from Redux)
const ParentContainer = ({ elements }) => {
  const elementsRefs = React.useRef({});

  React.useEffect(() => {
    // ...some code to animate the elements through the refs
  }, [elements]);

  return (
    <>
      <ElementsContainer elementsRefs={elementsRefs} />
    </>
  );
};

const state={
要素：[
{
id:“元素_1”，
属性：{
宽度：200，
身高：100，
背景颜色：“ff0000”
}
},
{
id:“元素2”，
属性：{
宽度：50，
身高：300，
背景颜色：“00ffff”
}
}
]
};
//元素容器（来自Redux的元素）
常量元素容器=（{elements，elementsRefs}）=>(
{elements.map（element=>(
{
elementsRefs.current[element.id]=el；
}}
/>
))}
);
//父容器（来自Redux的元素）
常量ParentContainer=（{elements}）=>{
const elementsRefs=React.useRef（{}）；
React.useffect（（）=>{
//…一些代码可以通过参照设置元素的动画
}，[要素]；
返回(
);
};

问题是Redux首先将更新的状态发送给父级，然后发送给子级（

elementscocontainer

）。每当我向状态添加元素时，只有在执行了

useffect

（这意味着通过利用ref的GSAP库触发一些DOM动画）之后，才会分配ref，这意味着useffect还找不到ref

到目前为止，我是这样解决的：

我在

useffect

中添加了一个提前返回，以防ref不存在

我在父级中创建了一个状态，用于记录元素的数量

我将状态的setter传递给元素，在ref回调中触发它

我添加了将计数作为useffect依赖项的状态

所有这些都会导致对元素列表的每次操作都进行两次渲染。我真的不喜欢这个解决方案，我想知道你是否可以建议一个更好的模式

我使用上下文而不是Redux对应用程序进行了PoC，它可以按预期工作（在这里您可以找到），但我仍然希望听到建议