Question

我有一个很复杂的<table>，有很多绑定到另一个javascript框架（淘汰赛）。我正在尝试将其中的一部分转换为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')
);

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

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

Answer 1

这将导致：

// Invalid HTML
<tbody id="I_want_this_in_React">
  <tbody>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</tbody>

这是无效的HTML。

由于React要求呈现的组件完全没有兄弟姐妹，我不认为有办法用React做到这一点。

例如，您需要使用某些 HTML元素包装<Tr />组件，这也不是有效的HTML。

// Invalid HTML
<tbody>
  <span>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </span>
</tbody>

有没有办法可以将用于React的<tbody>分离到自己的<table>？

如果是这样，你可以这样做：

HTML：

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

<table id="I_want_this_in_React"></table>

阵营：

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

或者，嵌套<table>：

HTML：

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

阵营：

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

Answer 2

您现在可以使用React.Fragment：

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

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

如何使用tbody作为根反应元素

2 个答案: