在React中呈现表格行时出错

Question

我的反应代码有问题：

var PostRow = React.createClass({
    render: function(){
        var loading = <tr><td>one row</td></tr>;
        return(
            {loading}
        )
    }
});

我收到此错误：

未捕获的不变违规：PostRow.render（）：必须返回有效的React元素（或null）。 您可能返回了undefined，数组或其他无效对象。

但这有效：

var PostRow = React.createClass({
    render: function(){
        return(
            <tr><td>joer</td></tr>
        )
    }
});

我的代码有什么问题？

谢谢！

Answer 1

所有React变量都应包含在HTML标记内。

var PostRow = React.createClass({
    render: function(){
        var loading = <tr><td>one row</td></tr>;
        return(
          <div>
            {loading}
          </div>
        )
    }
});

Answer 2

按照Pranesh的答案，此代码有效：

var PostRow = React.createClass({
    render: function(){
        var loading = <td>joer</td>;
        return(
            <tr>
                {loading}
            </tr>
        )
    }
});

Answer 3

事实是，您正在为变量分配一个JSX component并只是呈现它。 之所以违反，是因为您可能会为该变量分配了null，然后您将返回不可能的null。 您需要退货。 因此，只需将行添加到return()语句的组件中，它可以是div或table

 var PostRow = React.createClass({ render: function(){ var loading = <tr><td>one row</td></tr>; return( <div>{loading}</div> ) } }); ReactDOM.render(<PostRow/>, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> <div id="app"></div> 

Answer 4

return { foo }在ES6是速记return { foo: foo }在旧版本的JavaScript。

这意味着您的渲染函数返回一个普通对象，而不是React组件。 这是babel编译代码的方式：

var PostRow = React.createClass({
    displayName: "PostRow",

    render: function render() {
        var loading = React.createElement(
            "tr",
            null,
            React.createElement(
                "td",
                null,
                "one row"
            )
        );
        return { loading: loading };
    }
});

您可以跳过所有这些括号并仅返回变量：

var PostRow = React.createClass({
    render: function(){
        var loading = <tr><td>one row</td></tr>;
        return loading;
    }
});