反应获取所有儿童参考答案

【问题标题】：react get all children refs反应获取所有儿童参考
【发布时间】：2016-02-24 12:13:05
【问题描述】：

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

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

有什么办法吗？

【问题讨论】：

为什么需要他们的裁判？
因为我在父级中有一个组件（一个切换开关），它使用 refs 呈现组件。当切换开关时，我使用 refs 调用子组件中的函数。我现在可以使用它，但它仅适用于父级渲染的最后一个元素，所以我认为问题是可以渲染多个子级，因此它们每个都需要一个唯一的参考。

标签： javascript reactjs refs

【解决方案1】：

您应该能够使用Object.keys 循环访问this.refs 对象。

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

【讨论】：

【解决方案2】：

您可以使用 ref 属性的回调样式来收集所有 refs。

下面是一个粗略的例子。

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。

【讨论】：