javascript - react 。条件渲染

Question

我有一个 React 组件:

class SignUpStepTwo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isTherapistUpdated: false,
      isProfessionalInfoAdded: false,
    }
  }

  render() {

    if (!this.state.isTherapistUpdated) {
      return (
        <StepTwoPersonalInfo />
      );
    }
    else if (this.state.isTherapistUpdated) {
      return (
        <StepTwoProfessionalInfo />
      );
    }
    else if (this.state.isProfessionalInfoAdded &&
      this.state.isTherapistUpdated) {
      return (
        <StepTwoTermsOfUse />
      );
    }
  }
}

export default SignUpStepTwo;

我正在尝试更改我的 bool 标志并有条件地渲染我的组件。 但最后if永远不会满足，<StepTwoTermsOfUse/>组件未渲染。

Answer 1

这是因为即使 this.state.isProfessionalInfoAdded 和 isTherapistUpdated 都为 true，第二个条件也满足。

要实现此目的，您应该将第三个条件放在第二个条件之前。另外，我对您的代码进行了一些重组，以跳过不必要的检查:

if (this.state.isProfessionalInfoAdded && this.state.isTherapistUpdated) {
  return (
      <StepTwoTermsOfUse/>
  );
}

if (this.state.isTherapistUpdated) {
  return (
      <StepTwoProfessionalInfo/>
  );
}

return (
    <StepTwoPersonalInfo />
);