javascript - 未捕获不变违规 : ReactCompositeComponent. render() : error?

Question

我刚刚开始学习 ReactJS ，第一次运行我的应用程序时，我收到以下错误:

main.js:820 Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我已将我的项目托管在 Github 上，因为 main.js 文件太大，无法添加到此处，因此这里是 main.js 的链接: :

https://github.com/nicefellow1234/react-skeleton/blob/master/public/js/main.js

当我将此行修改为:

时，错误开始了

ReactDOM.render(React.createElement(List,null), document.getElementById('ingredients'));

我的这个问题与这个旧问题相关:

Can anyone let me know why am I getting this error?

Answer 1

您始终在渲染方法中返回字符串而不是元素。

你有

var List = React.createClass({
    render: function() {
        var listItems = ingredients.map(function(item) {
            return "<Listitem key={item.id} ingredient={item.text} />"; // This is wrong
        });
        return "<ul>{listItems}</ul>"; // This is wrong
    }

});


var ListItem = React.createClass({
     render: function() {
         return ("<li><h4>{this.props.ingredient}</h4></li>"); // This is wrong
     }

});

应该是

var List = React.createClass({
    render: function() {
        var listItems = ingredients.map(function(item) {
            return <ListItem key={item.id} ingredient={item.text} />;
        });
        return <ul>{listItems}</ul>;
    }

});


var ListItem = React.createClass({
    render: function() {
          return (<li><h4>{this.props.ingredient}</h4></li>);
     }

});

jsfiddle example

PD:下次您应该在问题中添加组件而不是捆绑文件时，会更容易为您提供帮助。