javascript - mdbreact 错误 - 元素类型无效:应为字符串(对于内置组件)
问题描述
我正在尝试使用 mdb react 实现 react-multistep 注册,但出现错误:
元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件)但得到:未定义。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
我尝试使用 Github 和 Stack Overflow 以不同的方式解决此问题,但在我的代码中找不到问题。
这是我的代码:
import React,{Component} from 'react'
import {Container,Step,Row,Col,Stepper,Input,Button} from 'mdbreact'
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
formActivePanel2: 1,
formActivePanel2Changed: false,
}
}
swapFormActive = (a) => (param) => (e) => {
this.setState({
['formActivePanel' + a]: param,
['formActivePanel' + a + 'Changed']: true
});
}
handleNextPrevClick = (a) => (param) => (e) => {
this.setState({
['formActivePanel' + a] : param,
['formActivePanel' + a + 'Changed']: true
});
}
handleSubmission = () => {
alert('Form submitted!');
}
calculateAutofocus = (a) => {
if (this.state['formActivePanel'+a+'Changed']) {
return true
}
}
render() {
return(
<Container>
<Row className="pt-5 justify-content-center">
<Col md="2" className="pl-5 pl-md-0 pb-5">
<Stepper icon vertical>
<Step icon="folder-open-o" stepName="Basic Information" onClick={this.swapFormActive(2)(1)} vertical></Step>
<Step icon="pencil" stepName="Personal Data" onClick={this.swapFormActive(2)(2)} vertical></Step>
<Step icon="photo" stepName="Terms and Conditions" onClick={this.swapFormActive(2)(3)} vertical></Step>
<Step icon="check" stepName="Finish" onClick={this.swapFormActive(2)(4)} vertical></Step>
</Stepper>
</Col>
<Col md="7">
{ this.state.formActivePanel2 == 1 &&
(<Col md="12">
<h3 className="font-weight-bold pl-0 my-4">
<strong>Basic Information</strong></h3>
<Input label="Email" className="mt-4" autoFocus={this.calculateAutofocus(2)}/>
<Input label="Username" className="mt-4"/>
<Input label="Password" className="mt-4"/>
<Input label="Repeat Password" className="mt-4"/>
<Button color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(2)(2)}>next</Button>
</Col>)}
{ this.state.formActivePanel2 == 2 &&
(<Col md="12">
<h3 className="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
<Input label="First Name" className="mt-3" autoFocus={this.calculateAutofocus(2)}/>
<Input label="Second Name" className="mt-3"/>
<Input label="Surname" className="mt-3"/>
<Input label="Address" type="textarea" rows="2"/>
<Button color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(2)(1)}>previous</Button>
<Button color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(2)(3)}>next</Button>
</Col>)}
{ this.state.formActivePanel2 == 3 &&
(<Col md="12">
<h3 className="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
<Input label="I agreee to the terms and conditions" type="checkbox" id="checkbox3" autoFocus={this.calculateAutofocus(2)} />
<Input label="I want to receive newsletter" type="checkbox" id="checkbox4" />
<Button color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(2)(2)}>previous</Button>
<Button color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(2)(4)}>next</Button>
</Col>)}
{ this.state.formActivePanel2 == 4 &&
(<Col md="12">
<h3 className="font-weight-bold pl-0 my-4"><strong>Finish</strong></h3>
<h2 className="text-center font-weight-bold my-4">Registration completed!</h2>
<Button color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(2)(3)}>previous</Button>
<Button color="success" rounded className="float-right" onClick={this.handleSubmission}>submit</Button>
</Col>)}
</Col>
</Row>
</Container>
)
}
}
export default Main
解决方案
您正在将组件导出Main
为default
并且在您使用该Main
组件的组件中,您正在将其导入为import {Main} from path/Main.js
. 所以,只需将其更改为import Main from path/Main.js
.
更新:
swapFormActive = (a,param,e) => {
this.setState({
['formActivePanel' + a]: param,
['formActivePanel' + a + 'Changed']: true
});
}
handleNextPrevClick = (a,param,e) => {
this.setState({
['formActivePanel' + a] : param,
['formActivePanel' + a + 'Changed']: true
});
}
...
<Step icon="check" stepName="Finish" onClick={(e)=>this.swapFormActive(2,4,e)} vertical></Step>
<Button color="mdb-color" rounded className="float-right" onClick={(e)=>this.handleNextPrevClick(2,2,e)}>next</Button>
推荐阅读
- node.js - 使用 express-validator 检查输入是用户名还是电子邮件
- javascript - xhr请求后刷新jquery选择器
- java - jaotc 库无法在 javac 中运行;java说没有main方法
- python - 实施终极井字游戏,但在一个子板上获胜会结束游戏
- facebook - Instagram API 2020 年弃用
- javascript - 如何禁用 TouchableOpacity 内的可点击开关?
- javascript - 如何通过弹出窗口获取地理服务器中发布的 wms 图层的属性信息。传单
- python-3.x - 如何跟踪 Flopy 创建的 MODFLOW 输出中的错误
- c# - 关于连接字符串覆盖的运行设置文件的建议
- javascript - 超时时无法实现取消 axios 请求的拦截器