React.createElement：类型不应该为null，undefined ..创建/渲染时

Question

所以完整的错误如下... 我不知道为什么我收到这个错误，我以为我创建了我的组件正确，但也许另一只眼睛可以看到我做错了什么。

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>

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;

我能显示日志，但它并没有要渲染的成分。我错误地创建组件？提前谢谢你的帮助！

Answer 1

您输入的不正确。 AddProductStepper是该模块的默认导出。你必须这样导入它作为默认的导出：

import AddProductStepper from './AddProductStepper'; 

为什么你，因为你试图导入命名出口，不模块中存在得到的错误是原因。这产生了未定义的错误。