Question

我正在寻找一些方法来返回孩子原始而不将它们包装在div中，以下不起作用：

render: function () {
  return this.props.children
  )
}

这样做：

render: function () {
  return (
    <div>
      {this.props.children}
    </div>
  )
}

如何编辑children并提供一组新的不包裹在另一个元素中？

Answer 1

这是你操纵this.props.children：

的方法

top-level-api.html#react.children

至于提供一套没有包裹的孩子，在Reactjs中是不可能和不合理的。您可能会认为您正在渲染组件，而不是列表或其他内容。 official explanation是这样的：

注意：一个限制：React组件只能呈现单个根节点。如果要返回多个节点，则必须将它们包装在一个根目录中。

嗯，当只有一个孩子时，你可以肯定return this.props.children。我重新检查了你的代码段，发现你可能有语法错误，return this.props.children下的额外括号

这是我自己的测试，它可以正确呈现：

var Test = React.createClass({
    render(){
        return this.props.children
    }
})

React.render(
    <Test><div>hello world</div></Test>,
    document.getElementById("test")
);

更新：在我看来，你应该像我上面那样无效，因为我相信这会使你的组件容易受到攻击。

返回元素的渲染而不包装

1 个答案: