반응 렌더링 구성 요소에서 잡히지 않는 불변의 위반

Question

webpack을 디버깅하는 것에 지쳐서 webpack에서 gulp로 내 빌드 시스템을 옮겼습니다. 꿀풀 빌드 시스템을 실행하고 클라이언트 측에서 React를로드 할 때이 오류가 나타납니다. 결과적으로 어떤 구성 요소도로드되지 않습니다. 구성 요소

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

      } 
     } 
    ) 
}) 

관련 부분을로드

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. 

코드를 간단한 구성 요소를로드 할 때

나는 반응에서 캐치되지 않는 불변 오류 시스템 구축

// 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()) 
}) 

은 내가 console.log() 문에서 Action 모듈에 중단 점을 설정하고, 이것은 나를 render 방법은 호출되지 않습니다 의심 선도, 호출되지 않습니다.

이 오류는 클래스가 정의 된 방식 또는 requireJS로 반환하는 방식과 관련이 있다고 생각합니다.

문맥에 코드가있는 repo입니다. 단지 복제 및 실행 npm install; npm start 이것을 재현해야합니다. 여기에서

Answer 1

:

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

Action 실제로 요소도 null의 반응 유효하지 않은, socket-io를 참조합니다.

모듈이 정의되는 순서대로 주입되고 있습니다.

당신은 당신의 기능 서명이 될 수 dependecies의 순서를 변경하거나 변경할 수 있습니다 function(React, ReactDOM, socketIo, googleApi, Action)