所以完整的错误如下...... 我不确定为什么我收到这个错误,我以为我正确地创建了我的组件,但也许另一只眼睛可以看到我做错了什么。
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;
我能够显示日志,但不想渲染组件。我是否错误地创建了组件?感谢您的帮助!
答案 0 :(得分:3)
您导入错误。 AddProductStepper
是模块的默认导出。因此,您必须将其导入为默认导出:
import AddProductStepper from './AddProductStepper';
您收到错误的原因是您尝试导入命名导出,该模块中不存在该导出。这产生了未定义的错误。