如何渲染兄弟元素而不将它们包装在父标记中？

Question

在大多数情况下,拥有父标记不是问题.

React.createClass({
    render: function() {
        return (
            <tbody>
                <tr><td>Item 1</td></tr>
                <tr><td>Item 2</td></tr>
            </tbody>
        );
    }
});

但是在某些情况下,在没有父项的情况下将兄弟元素放在一个渲染函数中是有意义的,特别是在表的情况下,您不希望在表中包装表行div.

React.createClass({
    render: function() {
        return (
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
        );
    }
});

第二个示例给出以下错误:Adjacent XJS elements must be wrapped in an enclosing tag while parsing file.

如何渲染两个兄弟元素而不将它们包裹在<div>类似的东西中？

Answer 1

这是目前的限制,但可能会在未来的某个时间点得到修复(github repo上存在一些未解决的问题).

现在,您可以使用一个返回数组的函数(这基本上是一个无状态组件):

function things(arg, onWhatever){
    return [
        <tr><td>Item 1</td></tr>,
        <tr><td>Item 2</td></tr>
    ];
}

并在组件中使用它.

return (
    <table><tbody>
      {things(arg1, this.handleWhatever)}
      {things(arg2, this.handleWhatever)}
    </tbody></table>
);

更新

在React 16中,您将能够从render返回一个数组.

另一个更新

您现在可以返回顶级数组,也可以使用<React.Fragment>.

对于数组,我们需要在每个项上放置一个键,因为React不知道这两个元素是常量,而不是动态创建的列表:

function RowPair() {
  return [
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]
}

有了React.Fragment它,它的行为更像是将它包装在一个<div>或类似的地方,key如果我们不动态构建子节点则不需要a .首先,我们可以将数组包装在Fragment中:

function RowPair() {
  return <React.Fragment>{[
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]}</React.Fragment>
}

然后我们可以key完全消除数组和s:

function RowPair() {
  return <React.Fragment>
    <tr><td>First</td></tr>
    <tr><td>Second</td></tr>
  </React.Fragment>
}

Answer 2

我知道这是一个老帖子,但也许我的回答可能对像我这样的新手有帮助.

在React 16.2中,增加了对Fragments的改进支持.

您现在可以像这样返回它:

return (
  <>
    <tr><td>Item 1</td></tr>
    <tr><td>Item 2</td></tr>
  </>
);

你可以用<></>或包裹它<Fragment></Fragment>.

如果您想传递一些属性,在编写时只支持键,您必须使用,<Fragment />因为短语法<></>不接受属性.

注意:如果要使用短语法,请确保使用Babel 7.

来源参考

Answer 3

哇噢!React团队最终添加了此功能.从React v16.0开始,您可以:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
      <tr key="a"><td>Item 1</td></tr>,
      <tr key="b"><td>Item 2</td></tr>
  ];
}

请参阅完整的博客文章,其中解释了"新渲染返回类型:片段和字符串".