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-way of do things ... < / p>

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

Answer 1

利用三元运算符渲染组件。 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>
  }
}

Answer 2

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

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

布尔AND运算符＆amp;＆amp;：

速记

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

普通写法

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

根据父状态动态渲染反应组件

2 个答案: