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

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

如何呈现两个兄弟元素,而不将它们包装在< div>或类似的东西?

这是目前的限制,但可能在未来某个时间(there’s some open issues on the 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>
);
翻译自:https://stackoverflow.com/questions/28371370/how-do-i-render-sibling-elements-without-wrapping-them-in-a-parent-tag

转载注明原文:reactjs – 如何渲染兄弟元素而不将它们包装在父标记中?