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);	
  }

  render() {
    return  <AddProductStepper />;
  }
}

export default AddProduct;

我能够显示日志，但不想渲染组件。我是否错误地创建了组件？感谢您的帮助！

Answer 1

您导入错误。 AddProductStepper是模块的默认导出。因此，您必须将其导入为默认导出：

import AddProductStepper from './AddProductStepper';

您收到错误的原因是您尝试导入命名导出，该模块中不存在该导出。这产生了未定义的错误。

React.createElement：type不应为null，undefined ..在创建/呈现

1 个答案: