[英]Component is not defined in react?
使用登錄功能作為組件會引發這樣的錯誤:'LoginModal' 未定義 react/jsx-no-undef 我不知道為什么會發生這種情況。 提前致謝。
export default class Login extends Component {
state={
loading: false,
modalShow: false,
clicked: false,
password:''
}
LoginModal = () => {
return <Modal {...this.props} size="lg" aria-labelledby="contained-modal-title-vcenter">
<Modal.Header closeButton>An otp has been sent to your Email!</Modal.Header>
<p>something...</p>
<Button variant="outline-primary" onClick={this.setState({modalShow:false})} >Change Password</Button>
</Modal>
}
handleForgetPassword = () => {
this.setState({modalShow: true})
}
handleSubmit = (event) => {
.....
}
render() {
return (
<div>
<div id="login-wrapper">
<p onClick={this.handleForgetPassword} className="forgot-password">forgot password?</p>
</div>
</div>
<LoginModal
show={this.state.modalShow}
onHide={() => this.setState({modalShow:false})}/>
</div>
)
}
}
您應該在構造函數中初始化狀態https://reactjs.org/docs/react-component.html#constructor
constructor(props) {
super(props);
this.state={
loading: false,
modalShow: false,
clicked: false,
password:''
}
此外,修復 render 方法,因為它缺少 或額外的結束標記
render() {
return (
<div>
<div id="login-wrapper">
<p onClick={this.handleForgetPassword} className="forgot-password">forgot password?</p>
</div>
<LoginModal
show={this.state.modalShow}
onHide={() => this.setState({modalShow:false})}/>
</div>
)
}
您沒有正確引用LoginModal
。 你應該做這樣的事情:
創建一個獨立的組件,然后將 props 傳遞給它
const LoginModal = ({onClick, ...props}) => {
return <Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter">
<Modal.Header closeButton>An otp has been sent to your Email!</Modal.Header>
<p>something...</p>
<Button variant="outline-primary" onClick={onClick} >Change Password</Button>
</Modal>
}
試試這個方法
return (
<div>
......
{this.LoginModal()}
</div>
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.