反应得到所有孩子参考

react get all children refs

本文关键字：孩子 参考      更新时间：2023-09-26

我有一个渲染动态子项的组件，这些子项中的每一个都需要为其分配一个引用，例如 ref={'childID' + index}

一旦孩子们加载了，我就需要一种方法来循环孩子们并获得他们的参考。

有什么办法可以做到这一点吗？

您应该能够使用 Object.keys 遍历this.refs对象。

Object.keys(this.refs).forEach(key =>
  const ref = this.refs[key];
  ...
);

您可以使用 ref 道具的回调样式来收集所有引用。

下面是一个粗略的示例。

var refs = {};
function refCollector(id) {
  return function(element) {
    refs[id] = element;
    if(allRefsCollected()) {
      // do some work with all refs
    }
  }
}
function allRefsCollected() {
  return Object.keys(refs).length >= children.length;
}
return children.map((Child, index) => {
  return <Child ref={refCollector(index)} />;
});

当allRefsCollected返回 true 时，您将知道所有子项都已呈现，refs将是一个对象，将id映射到element。

相关文章：