将反应组件动态附加到相同 <div> 的最佳方法

Question

我有一个 jQuery 自动建议功能，可以让你搜索 select，并将你的 selection 添加到 <div id="suggested-peers" />，在那里你可以看到你所有的select到目前为止已经做了选择。

  select: function(event, ui) {
    var newMember = ReactDOM.render(<MemberThumbnail name={ui.item.value.full_name} title={ui.item.value.title} />, document.getElementById("suggested-peers") );

问题是每次我制造新的selection，旧的就被替换了。我想过很多方法来做到这一点，但我很好奇最好的 React 风格的方法是什么。

Answer 1

这里没有太多信息，但基本上是这样的：

// Render method of the component that you have ReactDOM.render()ed into
// your document.
function render () {
  return (
    <div>
      {this.state.members.map(member => <MemberThumbnail
        name={member.full_name} title={member.title}
      />)}
    </div>
  );
}

// Where `this` refers to the component referenced above
select: function(event, ui) {
  this.setState({members: this.state.members.concat(ui.item)});
}

将反应组件动态附加到相同 <div> 的最佳方法

Best way to dynamically append react Components to the same <div>

jsx

reactjs