Reactjs React.js:条件呈现不加载子组件

我需要在条件渲染期间渲染子组件。它不显示在当前版本中。 如果插入到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>
                );
    }

导出默认类应用程序扩展组件{
数据={
电子邮件：“a@b.net",
密码：“adc”
}
状态={
电邮：“，
密码：“
}
emailChange=（e）=>{
this.setState（{email:e.target.value}）；
}
密码更改=（e）=>{
this.setState（{密码：e.target.value}）；
}
按钮提交=（e）=>{
设p=this.state.email==this.data.email
&&this.state.password===this.data.password？：警报（'poi'）；
e、 预防默认值（）
}
render（）{
返回(
进入
);
}
}       

在条件渲染期间未渲染的子组件：

  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>
                );
    }

const Page1=（）=>{
返回(
);
}

您只是有条件地将您的子组件分配给一个局部变量

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}
}

按钮提交=（e）=>{
设p=（this.state.email==this.data.email&&
this.state.password==this.data.password）？
: 
无效的
this.setState（{p:p}）；
e、 预防默认值（）
}
render（）{
...
{this.state.p}
}