如何呈现同级元素而不将其包装在父标记中？

像这样的语法对我有用

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

对于使用TypeScript的用户，正确的语法是：

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

我知道这是一篇过时的文章，但也许​​我的回答可能会对像我这样的新手有所帮助。

在React 16.2中，增加了对片段的支持。

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

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

您可以使用<></>或将其包装<Fragment></Fragment>。

如果您想传递一些属性，在编写本文时仅支持键，并且<Fragment />由于短语法<></>不接受属性，因此您必须使用键。

注意：如果要使用简短语法，请确保使用Babel 7。

来源参考

这个例子对我来说很好：

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>
)

您可以将其包装在方括号中，如下所示：

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

目前这是一个限制，但将来可能会解决（在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如果我们不是动态构建子代，则不需要。首先，我们可以将数组包装在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>
}