javascript - React 渲染组件中未捕获的不变违规

Question

我将构建系统从 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应该重现这个。

Answer 1

在这里:

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

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

模块按照定义的顺序注入(inject)。

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