- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 mdb react 实现 react-multistep 注册,但出现错误:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
我尝试使用 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>
关于javascript - mdbreact 错误 - 元素类型无效 : expected a string (for built-in components),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51759885/
如果您想使用 String.Concat() 连接 5 个或更多字符串,则它会使用 Concat(String[])。 为什么不一直使用 Concat(String[]) 而不再需要 Concat(S
今天在使用 String 时,我遇到了一种我以前不知道的行为。我无法理解内部发生的事情。 public String returnVal(){ return "5";
似乎在我所看到的任何地方,都有一些过时的版本,这些版本不再起作用。 我的问题似乎很简单。我有一个Java类,它映射到derby数据库。我正在使用注释,并且已经成功地在数据库中创建了所有其他表,但是在这
一、string::size_type() 在C++标准库类型 string ,在调用size函数求解string 对象时,返回值为size_type类型,一种类似于unsigned类型的int 数据
我正在尝试将数据保存到我的 plist 文件中,其中包含字符串数组的定义。我的plist - enter image description here 我将数据写入 plist 的代码是 -- let
我有一个带有键/值对的 JavaScript 对象,其中值是字符串数组: var errors = { "Message": ["Error #1", "Error #2"], "Em
例如,为了使用相同的函数迭代 List 和 List> ,我可以编写如下内容: import java.util.*; public class Test{ public static voi
第一个Dictionary就像 Dictionary ParentDict = new Dictionary(); ParentDict.Add("A_1", "1")
这是我的 jsp 文件: 我遇到了错误 The method replace(String, String, String) in the type Functions is not appl
我需要一些帮助。我有一个方法应该输出一个包含列表内容的 txt 文件(每行中的每个项目)。列表项是字符串数组。问题是,当我调用 string.Join 时,它返回文字字符串 "System.Strin
一位同事告诉我,使用以下方法: string url = "SomeURL"; string ext = "SomeExt"; string sub = "SomeSub"; string s
给定类: public class CategoryValuePair { String category; String value; } 还有一个方法: public
我正在尝试合并 Stream>>对象与所有 Streams 中的键一起映射到单个映射中. 例如, final Map someObject; final List>> list = someObjec
在这里使用 IDictionary 的值(value)是什么? 最佳答案 使用接口(interface)的值(value)始终相同:切换到另一个后端实现时,您不必更改客户端代码。 请考虑稍后分析您的代
我可以知道这两个字典声明之间的区别吗? var places = [String: String]() var places = [Dictionary()] 为什么当我尝试以这种方式附加声明时,只有
在 .NET 4.0 及更高版本中存在 string.IsNullOrWhiteSpace(string) 时,在检查字符串时使用 string.IsNullOrEmpty(string) 是否被视为
这个名字背后的原因是什么? SS64在 PowerShell 中解释此处的字符串如下: A here string is a single-quoted or double-quoted string
我打算离开 this 文章,尝试编写一个接受字符串和 &str 的函数,但我遇到了问题。我有以下功能: pub fn new(t_num: S) -> BigNum where S: Into {
我有一个结构为 [String: [String: String]] 的多维数组。我可以使用 for 循环到达 [String: String] 位,但我不知道如何访问主键(这个位 [String:
我正在尝试使用 sarama(管理员模式)创建主题。没有 ConfigEntries 工作正常。但我需要定义一些配置。 我设置了主题配置(这里发生了错误): tConfigs := map[s
我是一名优秀的程序员,十分优秀!