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，该评论所拥有的每条评论都有其“pComment”值由其所有者ID持有。

但是这样做我得到

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

Answer 1

而不是考虑折叠（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 })
  },
})

在css中：

.hidden div { display: none; }

修改：如何追加div

停止用动词思考。你不想追加（v） div，你想要div present（adj）或缺席（adj） 。您可以使用另一个布尔值，或者您喜欢的任何条件：

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

修改：如何将子视图放在父视图中

将子元素放在父元素中。

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

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

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

Answer 2

您不应该使用React强制修改DOM。调用this.setState并允许React修改DOM。

将代表您的注释结构的对象保持在组件层次结构的顶部附近，当需要修改它的某些更改时，您可以调用this.setState新的/修改的注释对象。

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

2 个答案: