Question

我在页面上有一些帖子，[想象一下]我需要将其添加到每个帖子的底部，就像Facebook一样，

但我怎么能这样做？

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

反应教程说的是..

我是否必须遍历所有帖子并追加到那个帖子？

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

如果我有这样的话？当页面上有新帖子时如何挂载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);
    });
});

多次渲染反应组件

2 个答案: