Question

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

一旦孩子们装了我，我就需要一种方法让孩子们过来并获得他们的参考。

任何方式做到这一点？

Answer 1

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

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

Answer 2

您可以使用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。< / p>

反应得到所有的孩子参考

2 个答案: