获得未捕获的不变违规：ReactCompositeComponent.render()：错误？答案

【问题标题】：Getting Uncaught Invariant Violation: ReactCompositeComponent.render(): error?获得未捕获的不变违规：ReactCompositeComponent.render()：错误？
【发布时间】：2016-06-03 10:45:50
【问题描述】：

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

main.js:820 未捕获的不变违规： ReactCompositeComponent.render()：一个有效的 React 元素（或 null）必须被退回。您可能返回了未定义、数组或其他一些无效的对象。

我在 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?

【问题讨论】：

React.createElement(List,null)里面的List是什么？

标签： javascript reactjs

【解决方案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：下次您应该在问题中添加组件而不是捆绑文件时，它会更容易为您提供帮助。

【讨论】：

感谢您指出错误，除了我在使用以下命令时没有引用 ReactDOM 元素时遇到解析错误：watchify src/main.jsx -o public/js/main.js -v -t [ babelify --presets [ react ]]
比如这个：Error: Parsing file C:\Users\Umair Shah Yousafzai\react-skeleton\src\components\List.jsx: Unexpected token (9:19)

【解决方案2】：

我没有阅读整个 js 文件，因为它非常大，但是当您在 render 方法中没有 return 时会出现此错误。确保在每个渲染方法中都使用 return 语句。

【讨论】：