Javascript 在ReactJS中使用处于渲染状态的函数将div附加到另一个div

我在胡闹，创建了一个类似于注释的树结构，除了我想创建折叠和扩展注释树的时候，它工作得很好。到目前为止，显示是好的，它在我的网页上以适当的树结构显示，就像reddit一样，但是我想建立一个折叠和展开注释和子元素功能。我有一个想法，使用jquery在完成渲染后立即附加div。当我想到它时，我想到的是：

         var childDiv = "#" + comment._id;
         var parentDiv = "#" + comment.pComment;


         $(parentDiv).append(childDiv);

这是我将div附加在一起的想法，其中pComment保存parentComments id，并且我已经在映射/呈现div时使用其自身的id建立了div。然而，问题是如何告诉我的渲染函数这是我在每个渲染映射结束时想要做的。我一次映射一条评论，然后在那里创建一个div，所以很明显，如果它不在那里，它就不能映射到该div，这就是我迷路的地方。我尝试了将其作为onclick函数的想法，结果很好，但我希望它附加到每个映射上，并在div渲染后在映射的末尾，以正确的顺序附加div。我认为有很多不同的方法可以做到这一点，但我不知道怎么做

render : function() {
      return( 

          <div>
          <ul className = "list-unstyled">
          {
          this.props.comments.map(function(comment) {
            return(


            //Right here is what I want to append to another div.
            <div id = {comment._id}>
            <div className = "userComments">
            //content
            </div>
            </div>
            )


            })
            }
              </ul>
              </div>
         )
    }

与其考虑塌陷（v），不如考虑将状态设置为塌陷（adj）。当用户单击展开/隐藏时，设置一个布尔值。在渲染函数中，检查布尔值

大概是这样的：

React.createClass({
  getInitialState: function () {
    return { hidden: false } 
  },

  render: function () {
    return (<div class={ this.state.hidden && 'hidden' } onClick={ this.toggle }>
      { this.props.children }
    </div>)
  },

  toggle: function (ev) {
    this.setState({ hidden: !this.state.hidden })
  },
})

编辑：如何追加div

停止用动词思考。您不希望附加（v）div，而是希望div存在（adj）或不存在（adj）。您可以使用另一个布尔值或任何您想要的条件：

render: function () {
  return (<div>{ this.state.weWantDivs && this.renderDivs() }</div>)
}

---

您不应该强制使用React修改DOM。调用

this.setState

并允许React修改DOM

---

在组件层次结构的顶部保留一个表示注释结构的对象，当需要修改的内容发生更改时，您可以调用

this.setState

新的/修改的注释对象。

我是说，这将帮助我进行折叠，谢谢，但是我该如何处理div的附加呢？我仍然对你的解释感到困惑，在某种程度上我必须声明这个孩子属于这个父母。我不可能在渲染的jsx中这样做，可以吗？似乎出于某种原因，我无法理解这一点。通过在另一个组件的

render

函数中呈现一个组件，可以有效地建立这种关系。我很理解它，并且我已经让它工作起来了。谢谢！通常，在发布后查看您的帖子是一个好主意，看看您是否有什么需要清理的地方-在这种情况下，格式化代码以便人们更容易阅读和帮助您可能是一个好主意

.hidden div { display: none; }

render: function () {
  return (<div>{ this.state.weWantDivs && this.renderDivs() }</div>)
}

render: function () {
  return <Parent><Child></Child></Parent>
}

var Parent = React.createClass({
  render: function () {
    return <div>{ this.props.children }</div>
  }
})