Question

我的反应代码有问题：

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

我收到此错误：

Uncaught Invariant Violation：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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

ES6中的

return { foo }是旧版JavaScript中return { foo: foo }的简写。

这意味着您的渲染函数返回普通对象，而不是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;
    }
});

在反应中呈现表行时出错

4 个答案: