如何在不将兄弟元素包装在父标签中的情况下呈现兄弟元素？

Question

在大多数情况下，拥有父标签不是问题。

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

但在某些情况下，在一个没有父级的渲染函数中包含同级元素是有意义的，尤其是在 table 的情况下，您不想将 table行在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)。

现在，您可以使用一个 return 数组的函数（这基本上是一个无状态组件）：

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 中，您将能够 return 来自渲染的数组。

另一个更新

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

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

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

使用 React.Fragment，它的行为更像是将其包装在 <div> 或类似的东西中，如果我们不动态构建子项，则不需要 key。首先，我们可以将数组包装在一个片段中：

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

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

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

Answer 2

你可以像这样把它包在方括号中：

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

Answer 3

这个例子很适合我：

let values = [];

if (props.Values){
  values = [
    <tr key={1}>
      <td>props.Values[0].SomeValue</td>
    </tr>
  ,
    <tr key={2}>
        <td>props.Values[1].SomeValue</td>
        </tr>
    ];
}

return (
    <table className="no-border-table table">
      <tbody>
        <tr>
            <th>Some text</th>
        </tr>
        {values}
      </tbody>
    </table>
)

Answer 4

哇哦！ 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>
  ];
}

参见full blog post explaining "New render return types: fragments and strings" here。

Answer 5

类似这种语法的东西对我有用

this.props.map((data,index)=>{return( [ <tr>....</tr>,<tr>....</tr>];)});

Answer 6

对于那些使用 TypeScript 的人来说，正确的语法是：

return [
  (
    <div>Foo</div>
  ),
  (
    <div>Bar</div>
  )
];

Answer 7

我知道这已经很老了post，但也许我的回答对像我这样的新手有帮助。

在 React 16.2 中，添加了对 Fragments 的改进支持。

您现在可以 return 像这样：

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

您可以用 <></> 或 <Fragment></Fragment> 包裹它。

如果您想传递一些属性，在撰写本文时仅支持 key，您必须使用 <Fragment />，因为语法较短<></> 不接受属性。

注意：如果您要使用短语法，make sure that you are using Babel 7。

Source Reference

Answer 8

在大多数情况下，拥有一个父元素是有帮助的，例如，您可以拥有一个父元素 className，它可以针对子元素样式和其他一些场景...

但是，如果你真的不想那样做，你可以使用 React.Fragment

所以简单地做这样的事情：

<React.Fragment>
  <First />
  <Second />
  <Third />
</React.Fragment>

从版本 16.2 开始，有一个缩短的版本也使用 <>，在渲染函数中看起来像这样：

render() {
  return (
    <>
      <First />
      <Second />
      <Third />
    </>
  );
}

此外，如果使用 16.0 及更高版本，您可以 return 不需要父包装器的元素数组，如下所示：

render() {
 return [
  <h1 key="heading">Hello from Alireza!</h1>,
  <p key="first">Here where I'm!</p>,
  <p key="second">And again here :)</p>
 ];
}

Answer 9

我们可以通过将两个同级组件包裹在 React.Fragment 中来渲染它们。例如

ReactDOM.render(
  <React.Fragment>
     <Item1/>
     <Item2/>
  </React.Fragment>,document.getElementById('root')
);

不过还有更短的手。

ReactDOM.render(
  <>
     <Item1/>
     <Item2/>
  </>,document.getElementById('root')
);

将组件包装在 React.Fragment 中不会向 DOM 添加额外的节点。

如何在不将兄弟元素包装在父标签中的情况下呈现兄弟元素？

How do I render sibling elements without wrapping them in a parent tag?

reactjs

更新

另一个更新