基于父状态动态渲染 React 组件

Question

我的父组件，基本上是一个表单，有一个子组件，一个带有加载器的叠加层，它只需要根据父组件的状态显示。

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 />, {})，但我不知道如何将这个孩子重新附加到父母身上，据我所知，这不是 React 的做事方式......

我还尝试根据父级的state 设置prop ob Overlay，例如React.cloneElement(<Overlay />, { visible = this.state.loading })，但似乎无法使其工作...

Answer 1

对于有问题的情况，我更喜欢下面的表达式而不是三元运算符

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

记住不要错过渲染函数中的 return 子句。记住不要直接通过赋值来改变状态。这是一个通过单击按钮提交表单并显示加载消息的工作组件。这是实现行为的典型 React 方式。

class HelloWidget extends React.Component{
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this)
    this.state = {
      loading: false
     };
  }
  handleSubmit() {
    this.setState({ loading: true });
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        { this.state.loading && <div>loading...</div> }
        <button>click</button>
       </form>
     );
  }
}

---

附录 - 下面是两个速记技巧。

三元运算符：

速记

render() {
  return condition === someCondition ? <CompA /> : <CompB />;
}

速写

render() {
  if ( condition === someCondition ) {
    return <CompA />;
  } else {
    return <CompB />;
  }
}

布尔与运算符 &&：

速记

render() {
  return condition === someCondition && <CompA />;
}

速写

render() {
  if ( condition === someCondition ) {
    return <CompA />;
  } else {
    return null;
  }
}

Answer 2

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

您应该使用this.setState({loading: true}); 来更改状态，而不是直接赋值。在您的handleSubmit(); 中也使用event.preventDefault()

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