多次渲染反应组件

Question

我在页面上有一些 post，[想象一下] 我需要在每个 post 的底部添加我的，就像 Facebook，

但是我该怎么做呢？

React.renderComponent(<CommentForm />,document.getElementById('someId'));

React 教程是这么说的..

我是否必须遍历所有 post 并将其附加到其中？

$.each($('.post .commentArea', function(key, elem) {
  React.renderComponent(<CommentForm />, elem); 
})

如果我有这样的？当页面上有一个新的 post 时，如何装载 CommentForm？

Answer 1

基本上它在监听一个数组，假设在本例中是一个帖子列表。

一旦存储中的列表发生变化，视图将获取事件并相应地更新UI。像这样的东西应该做渲染工作。

renderList() {
  return _.map(this.state.lists, (list) => {
    return (
      <div>
        <div> list.title </div>
        <div> list.body </div>
      </div>
    )
  })
}

render() {
  return (
    <div>
      <header />
      {this.renderList()}
      <footer />
    </div>
  )
}

Answer 2

@user3656084，这个fiddle会起作用。

var CommentForm = React.createClass({
    render: function() {
        return <div>{this.props.content}</div>;
    }
});

$(document).ready(function() {
    jQuery.each( $('.post .commentForm'), function(key, elem) {
        console.log(elem)
        React.render(<CommentForm content="Bla" />, elem);
    });
});

多次渲染反应组件

Render react component multiple times

reactjs

react-jsx