dynamic - react : creating and referencing dynamic component refs

Question

我正在尝试跟踪任意数量的子组件。

通常你只会引用 this.refs.refName，但在我的例子中，我需要跟踪任意数量的引用。

这是一个简洁的例子:

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 文档中找到这个问题的答案。

Answer 1

以下将每个跨度的引用保存在一个名为 this.spans

的数组中

这是有效的，因为每个 span 使用 addSpanRef 方法将自己添加到 refs 数组。

getAllNames 然后遍历所有引用的 span 并获取它们的 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);