reactjs - 如何渲染同级元素而不将它们包装在父标签中？

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

这是当前的一个限制，但可能会在将来的某个时候得到修复 ( there's some open issues on the 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 中，您将能够从渲染返回一个数组。

另一个更新

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

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

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

与 React.Fragment ，它的行为更像是把它包裹在 <div> 中。或类似的，其中 key如果我们不动态构建子项，则不需要。首先，我们可以将数组包装在 Fragment 中:

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

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

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