javascript - 在 ReactJS 的渲染状态下使用函数将一个 div 附加到另一个

Question

我一直在搞乱并创建一个类似树结构的评论，效果很好，除非我想创建折叠和展开的评论树。到目前为止显示效果很好，它以正确的树结构显示在我的网页上，就像 reddit 一样，但是我想构建折叠和展开评论和子评论功能。我有一个想法，即在完成渲染后立即使用 jquery 附加一个 div。当我想到它时，我想到的是:

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


         $(parentDiv).append(childDiv);

这是我将 div 附加在一起的想法，其中 pComment 包含 parentComments id，并且我已经在映射/渲染后立即使用它们自己的 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>
         )
    }

通常我的目标是创建一个父 div，并将包含其子项的任何 div 附加到它。

我试过 var x = $(parentDiv).append(childDiv); 然后我继续在 div 之间调用 {x} 所以它会附加它。对于父案例，pComment 默认为 id ROOT，该评论之后拥有的每个评论都由其所有者 id 持有其 'pComment' 值。

但是这样做我得到了

Uncaught Error: Invariant Violation: traverseAllChildren(...): Encountered an invalid child; DOM elements are not valid children of React components.

Answer 1

与其考虑折叠 (v)，不如考虑将状态设置为折叠 (adj)。当用户点击展开/隐藏时，设置一个 bool 值。在您的渲染函数中，检查 bool 值。

像这样:

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 })
  },
})

在 CSS 中:

.hidden div { display: none; }

编辑:如何附加div

停止用动词思考。您不想附加 (v) div，您希望 div 存在 (adj) 或不存在 (adj)。您可以使用另一个 bool 值，或任何您喜欢的条件:

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

编辑:如何将 subview 放入父 View

将子元素放在父元素中。

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

并在父元素中呈现特殊的 children 属性。

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