React.createElement : 형식이 null이 아니거나 정의되지 않아야합니다 .. 만들거나 렌더링 할 때

Question

전체 오류는 다음과 같습니다. 왜이 오류가 발생하는지 잘 모르겠습니다. 내 구성 요소를 만들었다 고 생각합니다. 어쩌면 또 다른 눈으로 내가 뭘 잘못하고 있는지 알 수 있습니다.

import React, { PropTypes } from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import {AddProductStepper} from './AddProductStepper'; 
 

 
class AddProduct extends React.Component { 
 
    constructor(props) { 
 
    super(props); \t 
 
    } 
 

 
    render() { 
 
    return <AddProductStepper />; 
 
    } 
 
} 
 

 
export default AddProduct;

import React, { PropTypes } from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import { 
 
    Step, 
 
    Stepper, 
 
    StepButton, 
 
} from 'material-ui/Stepper'; 
 
import RaisedButton from 'material-ui/RaisedButton'; 
 
import FlatButton from 'material-ui/FlatButton'; 
 

 
class AddProductStepper extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     stepIndex: 0 
 
    } 
 
    } 
 

 
    getStepContent(stepIndex) { 
 
    switch(stepIndex) { 
 
     case 0: 
 
     return 'Select campaign settings...'; 
 
     case 1: 
 
     return 'What is an ad group anyways?'; 
 
     case 2: 
 
     return 'This is the bit I really care about!'; 
 
     default: 
 
     return 'You\'re a long way from home sonny jim!'; 
 
    } 
 
    } 
 

 
    render() { 
 
    return(
 
     <div style={{ width: '100%', maxWidth: 700, margin: 'auto' }}> 
 
     <Stepper 
 
      linear={false} 
 
      activeStep = {this.state.stepIndex} 
 
     > 
 
      <Step> 
 
      <StepButton onClick={() => this.setState({stepIndex: 0})}> 
 
       Select campaign settings 
 
      </StepButton> 
 
      </Step> 
 
      <Step> 
 
      <StepButton onClick={() => this.setState({stepIndex: 1})}> 
 
       Create an ad group 
 
      </StepButton> 
 
      </Step> 
 
      <Step> 
 
      <StepButton onClick = {() => this.setState({stepIndex:2})}> 
 
       Create an ad 
 
      </StepButton> 
 
      </Step> 
 
     </Stepper> 
 
     <div> 
 
      <p>{this.getStepContent(this.state.stepIndex)}</p> 
 
      <div style={{ marginTop: 12 }}> 
 
      <FlatButton 
 
       label="Back" 
 
       disabled={this.state.stepIndex === 0} 
 
       onClick={() => this.setState({stepIndex:this.state.stepIndex - 1})} 
 
       style={{ marginRight: 12 }} 
 
      /> 
 
      <RaisedButton 
 
       label="Next" 
 
       disabled={this.state.stepIndex === 2} 
 
       primary={true} 
 
       onClick{() => { 
 
        this.setState({stepIndex:this.state.stepIndex+ 1}); 
 
        console.log(this.state); 
 
       } 
 
       } 
 
      /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
    export default AddProductStepper;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

나는 로그를 표시 할 수있어,하지만 구성 요소를 렌더링하지 않습니다. 구성 요소를 잘못 작성하고 있습니까? 사전에 도와 주셔서 감사합니다!

Answer 1

잘못 가져 오기 중입니다. AddProductStepper은 모듈의 기본 내보내기입니다. 당신은 따라서 기본 내보내기로 가져올 수 있습니다

import AddProductStepper from './AddProductStepper'; 

당신이 모듈에 존재하지 않는 라는 이름의 수출를 가져올 시도하기 때문에 오류였다있어 이유. 이로 인해 정의되지 않은 오류가 발생했습니다.