返回多個 <tr> React中的行

Question

我希望能夠返回2 <tr>行，這可以通過包裝在<tbody>中來實現，如下所示：

var Item = React.createClass({
    render: function() {
        return (
            <tbody>
                <tr>/*...*/</tr>
                <tr>/*...*/</tr>
            </tbody>
        );  
    }   
});

但是，我從React收到警告： <tbody>不能作為<tbody>的孩子出現

有沒有其他方法可以做到更友好的DOM？

Answer 1

這對React來說是一個煩人的限制。 <table>可以包含多個<tbody> - 將<Item>作為<table>的附加<tbody>呈現給你嗎？

Answer 2

您似乎遇到了最大的JSX根節點問題。 返回中只能有1個根節點，但它可以包含任意數量的子節點。 試試這個：

var Item = React.createClass({
    render: function() {
        return (
            <table> /* <- This is the root node. */
                <thead> /* <- Multiple nodes start at this level. */
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                </thead>
                <tbody>
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                </tbody>
                <tfoot>
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                </tfoot>
            </table>
        );  
    }   
});