在React中返回多行

Question

我希望能够返回2条<tr>行，这些行的工作方式是<tbody> var Item = React.createClass({ render: function() { return ( <tbody> <tr>/*...*/</tr> <tr>/*...*/</tr> </tbody> ); } }); ，如建议here：

$query_result

但是，我收到了React的警告： ＆lt; TBODY＆GT;不能作为＆lt;的孩子出现TBODY＆GT;

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

Answer 1

这对React来说是一个恼人的限制。 <table>可以包含多个<tbody> - 会在<Item>内为<tbody>提供<table>吗？

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