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

小编典典

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

reactjs

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

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>或类似的东西中？

阅读 257

2020-07-22

共1个答案

小编典典

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

请参阅完整的博客文章，此处解释了“新的渲染返回类型：片段和字符串”。

2020-07-22