使用 ReactJS 在动态组件中引用

Question

我遇到了一个问题，但我没有找到任何相关的文档。

这是我的组件的渲染方法：

render()
{
  return (
    <div refs="myContainer">
    </div>
  );
}

此外，我还有一种方法可以从我的 Java 服务器获取数据：

getAsyncData()
{
  $.get('...URL...')
    .done(function(response) {
      var list = JSON.parse(response); // This is an objects array
      var elementsList = [];

      list.forEach(function(item) {
        elementsList.push(<div ref={item.id}>{item.name}</div>);
      });

      React.render(elementsList, React.findDOMNode(this.refs.myContainer));
    });
}

在我的 componentDidMount 方法中，我只是启动异步方法：

componentDidMount()
{
  this.getAsyncData();
}

所以我从 ReactJS 收到了这个错误：

只有 ReactOwner 可以有 refs。这通常意味着你正在尝试 将 ref 添加到没有所有者的组件（即 不是在另一个组件的 render 方法中创建的）。尝试 将此组件呈现在一个新的顶级组件中，该组件 将持有参考。

所以这意味着我不能使用我的动态元素，另外认为 我将有一个复杂的组件，而不是一个简单的 DIV，我将拥有一个包含方法的复杂组件。

我该如何处理？

谢谢！

Answer 1

我该如何处理？

通过按应有的方式编写组件。保持数据状态。 .render() 在状态改变时调用，更新输出。

例子：

var Component = React.createClass({
  getInitialeState() {
    return {items: []};
  },

  getAsyncData() {
    $.get(...).done(
      response => this.setState({items: JSON.parse(response)})
    );
  },

  render() {
    var list = this.state.items.map(
      item => <div key={item.id} ref={item.id}>{item.name}</div>
    );
    return <div>{list}</div>;
  }
});

这就是 React 的全部意义：根据数据描述输出。您不是动态添加或删除元素，而是更新状态、重新渲染并让 React 弄清楚如何协调 DOM。
但是，我不清楚为什么在这种情况下需要 ref。

我推荐阅读https://facebook.github.io/react/docs/thinking-in-react.html