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

reactjs React.js

小宇宙路易

2020-03-13

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

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

如何呈现两个同级元素而不将它们包装在a <div>或类似的东西中?

第1449篇《如何呈现同级元素而不将其包装在父标记中?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
null 2020.03.13

像这样的语法对我有用

this.props.map((data,index)=>{return( [ <tr>....</tr>,<tr>....</tr>];)});
飞云Tom小宇宙 2020.03.13

对于使用TypeScript的用户,正确的语法是:

return [
  (
    <div>Foo</div>
  ),
  (
    <div>Bar</div>
  )
];
L神无Mandy 2020.03.13

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

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

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

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

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

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

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

来源参考

小宇宙古一 2020.03.13

这个例子对我来说很好:

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

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

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

目前这是一个限制,但将来可能会解决(在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>
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android