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

Question

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

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


         $(parentDiv).append(childDiv);

这是我将 divs 附加在一起的想法，其中 pComment 包含 parentComments id，并且我已经用它们自己的 id 建立了我的 divs mapped/rendered.然而，问题是我如何告诉我的渲染函数这是我想在每个渲染映射结束时做的事情。我一次映射一个评论，然后在那里创建 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

与其考虑 collapsing (v)，不如考虑将状态设置为 collapsed (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

停止用动词思考。您不想 append (v) div，您希望 div 要么 present (adj) 要么 absent (调整）。您可以使用另一个布尔值，或任何您喜欢的条件：

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 new/modified 评论对象。

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

Using a function in the render state in ReactJS to append a div to another

javascript

jquery

reactjs

react-jsx