reactjs - 根据父状态动态渲染React组件

我的父级组件基本上是一个表单，有一个子级，一个带有加载程序的覆盖层，仅需根据父级的状态进行显示。

import React from 'react';
import Overlay from './overlay';

export default class RegisterForm extends React.Component {
  constructor {
    this.state = {
      loading: false
    };
  }
  handleSubmit(){
    this.state.loading = true;
    ...
  }

  render(){
    return(
    <form onSubmit={() => this.handleSubmit()}>
     ...
     <Overlay />
    </form>
    );
  }
}

我该如何实现？

我尝试了React.cloneElement(<Overlay />, {})，但是我不知道如何将这个孩子重新添加到父母那里，据我了解，这不是做事的反应方式...

我还尝试根据父级的prop设置Overlay ob state，但似乎无法正常工作...

最佳答案

利用三元运算符来渲染您的组件。 React JSX支持If-else逻辑进行渲染，如{(this.state.loading == false) ? <Overlay /> : null}

您应该使用this.setState({loading: true});更改状态，而不是直接分配。还要在event.preventDefault()中使用handleSubmit();

import React from 'react';
import Overlay from './overlay';

export default class RegisterForm extends React.Component {
  constructor {
    this.state = {
      loading: false
    };
  }
  handleSubmit(event){
   event.preventDefault();
    this.setState({loading: true});
    ...
  }

  render(){
    <form onSubmit {()=>{this.handleSubmit()}>

     {(this.state.loading == false) ? <Overlay /> : null}
    </form>
  }
}

关于reactjs - 根据父状态动态渲染React组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39703913/