使用ReactJS参考动态组件

时间:2015-05-30 22:24:43

标签: reactjs react-jsx

我遇到了一个问题而且我还没有找到任何相关的文件。

这是我的组件渲染方法:

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可以拥有引用。这通常意味着您正在尝试   将ref添加到没有所有者的组件(即,是   不是在另一个组件的render方法中创建的。尝试   将此组件呈现在新的顶级组件中   将举行参考。

所以这意味着我无法使用我的动态元素,另外认为而不是简单的DIV我会在中使用方法的复杂组件。

我该如何处理?

谢谢!

1 个答案:

答案 0 :(得分:3)

  

我该如何处理?

通过编写组件的方式。保持数据处于状态。当状态改变时,会调用.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。
但是,我不清楚为什么在这种情况下需要参考。

我建议您阅读https://facebook.github.io/react/docs/thinking-in-react.html