如何呈现同级元素而不将它们包装在父标签中? [英] How do I render sibling elements without wrapping them in a parent tag?

问题描述

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

React.createClass({渲染:函数(){返回 (<tr><td>项目 1</td></tr><tr><td>项目 2</td></tr></tbody>);}});

但是在某些情况下，在没有父级的渲染函数中包含同级元素是有意义的，尤其是在表格的情况下，您不想将表格行包装在 div.

React.createClass({渲染:函数(){返回 (<tr><td>项目 1</td></tr><tr><td>项目 2</td></tr>);}});

第二个示例给出以下错误:解析文件时，相邻的 XJS 元素必须包含在封闭标记中.

如何渲染两个兄弟元素而不将它们包装在

或类似的东西中?

解决方案

哇哦！React 团队最终添加了这个功能.从 React v16.0 开始，你可以这样做:

render() {//无需将列表项包装在额外的元素中！返回 [//不要忘记钥匙:)<tr key="a"><td>项目 1</td></tr>,<tr key="b"><td>项目 2</td></tr>];}

见完整的博客文章，在此处解释新的渲染返回类型:片段和字符串".

In most cases, having a parent tag isn't an issue.

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

But there are some cases where it makes sense to have sibling elements in one render function without a parent, and especially in the case of a table, you don't want to wrap a table row in a div.

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

The second example gives the following error: Adjacent XJS elements must be wrapped in an enclosing tag while parsing file.

How can I render two sibling elements without wrapping them in a <div> or something similar?

解决方案

Woohoo! The React team finally added this feature. As of React v16.0, you can do:

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

See the full blog post explaining "New render return types: fragments and strings" here.

这篇关于如何呈现同级元素而不将它们包装在父标签中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！