javascript - 如何使用 tbody 作为根 react 元素

Question

我有一个大复杂<table>有很多绑定(bind)到另一个 javascript 框架( knockout )。我正在尝试将其中的一部分转换为 React。

<table>
    <tbody id="lots_of_legacy_knockout"> ... </tbody>
    <tbody id="I_want_this_in_React"></tbody>
</table>

然而，这试图将 <tbody> <tbody> 中的根元素容器:

const Tbody = () => (
    <tbody>
        <tr />
        <tr />
        <tr />
    </tbody>
);
ReactDOM.render(
    <Tbody />,
    document.getElementById('I_want_this_in_React')
);

这会导致错误，因为 React 需要一个唯一的根元素:

const Tbody = () => ([
    <tr />,
    <tr />,
    <tr />,
]);

ReactDOM.render(
    <Tbody />,
    document.getElementById('I_want_this_in_React')
);

如何在不重写整个根目录的情况下完成此操作 <table> React 中的元素？

有没有办法将 react 根和 react 容器结合起来？

Answer 1

您现在可以使用 React.Fragment:

const Tbody = () => (
    <React.Fragment>
        <tr />
        <tr />
        <tr />
    </React.Fragment>
);

ReactDOM.render(
    <Tbody />,
    document.getElementById('I_want_this_in_React')
);