反应。 条件渲染

Question

I have a React component:

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;

And I'm trying to change my bool flags and conditionally render my components. But the last if is never satisfied and the <StepTwoTermsOfUse/> component is not rendered.

Answer 1

It's because the second condition is satisfied even if both this.state.isProfessionalInfoAdded and isTherapistUpdated are true.

To make this work you should put the third condition, before the second. Also, I've restructured your code a bit to skip unnecessary checks:

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

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

return (
    <StepTwoPersonalInfo />
);

Answer 2

你应该把最后一个如果放在第一个，它应该可以工作！

Answer 3

You should switch your last two statements. The second if statement in your question satisfies if the 3rd one satisfies as well. So the seconds one make the function exit.

class SignUpStepTwo extends Component {
constructor(props) {
        super(props);
        this.state = {
            isTherapistUpdated: false,
            isProfessionalInfoAdded: false,
            }
        }
     }
render() {
        if (!this.state.isTherapistUpdated) {
            return (
                <StepTwoPersonalInfo />
            );
        }
        if (this.state.isProfessionalInfoAdded) {
            return (
                <StepTwoTermsOfUse/>
            );
        }

        return (
            <StepTwoProfessionalInfo/>
        );
    }
}

export default SignUpStepTwo;

What this does is:

• If isTherapistIsUpdated === false , then render StepTwoPersonalInfo
• If isTherapistIsUpdate === true (implied, because the first if does not match) AND isProfessionalInfoAdded === true , then render StepTwoTermsOfUse
• In any other case, which means isTherapistIsUpdated === true AND isProfessionalInfoAdded === false , render StepTwoProfessionalInfo

Answer 4

I think if you use a temporary variable to set your logic result to, the code resuls being a bit clearer...

class SignUpStepTwo extends Component {

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

    render() {
        let render = (
          (!this.state.isTherapistUpdated) ? <StepTwoPersonalInfo /> :
          (this.state.isTherapistUpdated && this.state.isProfessionalInfoAdded) ? <StepTwoTermsOfUse/> :
          <StepTwoProfessionalInfo />
        );
        return render;
    }
}

export default SignUpStepTwo;