[英]React.js: conditional rendering does not load child component
我需要在條件渲染期間渲染子組件。 在當前版本中不顯示。 如果插入到html標記中,則沒有錯誤,組件正常呈現。 我對條件渲染的錯誤是什么?
父組件:
export default class App extends Component {
data = {
email: "a@b.net",
password: "adc"
}
state = {
email: "",
password: ""
}
emailChange=(e)=>{
this.setState({email: e.target.value});
}
passwordChange=(e)=>{
this.setState({password: e.target.value});
}
buttonSubmit=(e)=>{
let p=this.state.email===this.data.email
&& this.state.password===this.data.password ? <div><Page1/></div> : alert('poi');
e.preventDefault()
}
render() {
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<form noValidate autoComplete="off"
onSubmit={this.buttonSubmit}>
<div style={{marginTop:"150px"}}>
<Grid container spacing={2}>
<Grid item xs={12} >
<TextField
id="outlined-name"
label="e-mail"
variant="outlined"
value={this.state.email}
onChange={this.emailChange}/>
</Grid>
<Grid item xs={12} >
<TextField
className="MuiInput-input"
id="outlined-name"
label="password"
variant="outlined"
value={this.state.password}
onChange={this.passwordChange}/>
</Grid>
<Grid item xs={12}>
<Button
style={{width:'210px'}}
type="submit"
fullWidth
variant="contained"
color="primary"
>
Enter
</Button>
</Grid>
</Grid>
</div>
</form>
</Container>
);
}
}
條件渲染期間未渲染的子組件:
const Page1 =()=>{
return (
<div style={{height: "100vh"}}>
<Header/>
<Grid container spacing={3}>
<Grid item xs={3}>
<Paper><ButtonPage/></Paper>
</Grid>
<Grid item xs={12}>
<Paper><ButtonWindow /></Paper>
</Grid>
</Grid>
</div>
);
}
您只是將您的子組件有條件地分配給一個局部變量p
,而您從未渲染過該變量。 我會像這樣改變你的邏輯:
buttonSubmit=(e)=>{
let p=(this.state.email===this.data.email &&
this.state.password===this.data.password) ?
<div><Page1/></div>
:
null;
this.setState({p: p});
e.preventDefault()
}
render() {
...
{this.state.p}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.