React 渲染组件中未捕获的不变违规答案

【问题标题】：Uncaught Invariant Violation in React rendering componentReact 渲染组件中未捕获的不变违规
【发布时间】：2016-06-08 05:37:22
【问题描述】：

我将构建系统从 webpack 移动到 gulp，因为我厌倦了尝试调试 webpack，当我让 gulp 构建系统运行并在客户端加载 React 时出现了这个错误。结果，我的任何组件都不会加载。

加载简单组件时，我从 react 中得到一个未捕获的不变错误

react.js:19500 Warning: lookup(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

加载组件的代码

var require = requirejs


require(['react','react-dom','socket-io','google-api','./components/Action'], function(React,ReactDOM,Action) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".  



    // hand control of the DOM over to react
    ReactDOM.render( <div><Action/></div>, document.getElementById('root')  )

});

组件本身

define(['react'],function(React){

    // this class renders an action item
    // It is a draggable class, but does not handle drags itself
    // STATELESS
    // PROPS
    // * rank - key for sorting order
    // * Content - Content of div
    // * data-id - unique ID for handling drag events
    return ( 
        class Action extends React.Component {

            render() {
                console.log('this is called')
                return (<div className = "action" draggable = "true" data-id = {this.props.dataId} >
                                <p className = "row">{this.props.rank}    </p><p className = "row">{this.props.content}</p>
                        </div>)

            }
        }
    )
})

构建系统的相关部分

// copy the new frontend files and refresh them
gulp.task('frontend', ['sass'], function(){


return gulp.src(patt.frontend, { base: patt.scriptsBase } )
    .pipe(plumber())
    .pipe(babel({
        presets: ['react','es2015']
    }))
    .pipe(gulp.dest('./dest/scripts/'))
    .pipe(livereload())
})

我在Action 模块的console.log() 语句中设置了一个断点，并且从未调用过，这导致我怀疑从未调用过render 方法。

我怀疑这个错误与定义类的方式有关，或者与我使用 requireJS 返回它的方式有关。

这里是repo，代码在上下文中。只需克隆并运行 npm install; npm start 即可重现此内容。

【问题讨论】：

标签： javascript reactjs gulp ecmascript-6 babeljs

【解决方案1】：

在这里：

require(['react','react-dom','socket-io','google-api','./components/Action'], function(React,ReactDOM,Action) {

Action 实际上引用了socket-io，它既不是有效的 React 元素也不是 null。

模块的注入顺序与它们定义的顺序相同。

您可以更改依赖的顺序，或将您的函数签名更改为：function(React, ReactDOM, socketIo, googleApi, Action)

【讨论】：