React：创建和引用动态组件引用

joshuakcockrell 发表于 Dev

Joshuakcockrell

我试图跟踪任意数量的子组件。

通常，您只引用this.refs.refName，但就我而言，我需要跟踪任意数量的ref。

这是一个简洁的示例：

var NamesList = React.createClass({
  getAllNames: function() {
    // Somehow return an array of names...

    var names = [];
    this.refs.????.forEach(function (span) {
      names.push(span.textContent);
    })
  },

  render: function() {
    var names = ['jack','fred','bob','carl'];
    var spans = [];

    names.forEach(function (name) {
      spans.push(<span contentEditable={true} ref='?????'>name</span>);
    });

    return (
      <div>
        {spans}
      </div>;
    );
  }
});

ReactDOM.render(<NamesList></NamesList>, mountNode);

如果我错误地解决了问题，请告诉我。我希望得到的结果是将数据从RESTful服务传递到React组件，允许用户编辑该数据，并在需要时再次将其导出。我一直无法在React refs docs中找到答案。

Joshuakcockrell

以下将引用保留到称为的数组内的每个范围 this.spans

之所以可行，是因为每个跨度都使用addSpanRef方法将自身添加到refs数组中。

getAllNames 然后遍历所有引用的范围并获取其textContent。

如果您有子组件（而不是跨度），则可以在那些子节点上调用方法！

var NamesList = React.createClass({

  // returns an array of names
  getAllNames() {
    return this.spans.map((span) => span.textContent);
  },

  // Add to our spans refs array
  addSpanRef (node) {
    this.spans = [...this.spans, node];
  },

  render: function() {
    this.spans = []; // create the spans refs array
    var names = ['jack','fred','bob','carl'];

    // Save a ref to "this" for the forEach loop
    var thisRef = this;
    names.forEach(function (name) {
      spans.push(<span contentEditable={true} ref={thisRef.addSpanRef}>name</span>);
    });

    return (
      <div>
        {spans}
      </div>;
    );
  }
});

ReactDOM.render(<NamesList></NamesList>, mountNode);