tbodyをルートの反応要素として使用する方法

Question

大きな複雑な<table>があり、別の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') 
); 

と望んで反応するので、これはエラーになりユニークなルート要素：

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

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

Reactのルート<table>要素全体を書き直すことなく、これをどのように達成できますか？

反応根と反応容器を組み合わせる方法はありますか？

Answer 1

これは、になります：有効なHTMLではありません

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

。

リアクションでは、レンダリングされたコンポーネントが兄弟を全く持たないことが必要なので、リアクションでこれを行う方法はないと思います。

たとえば、あなたはまた、有効なHTMLではないでしょう一部 HTML要素、と<Tr />コンポーネントをラップする必要があります。

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

あなたの代わりに<table>それ自身にリアクトすることを目的<tbody>を分離することができます方法はありますか？

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