Question

我有一个React组件：

vi /etc/fstab

我正在尝试更改bool标志并有条件地渲染我的组件。但是最后一个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;永远不会满足，并且if组件不会呈现。

Answer 1

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

要执行此操作，您应该在第二个条件之前放置第三个条件。另外，我对您的代码进行了一些重组，以跳过不必要的检查：

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

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

return (
    <StepTwoPersonalInfo />
);

Answer 2

如果要放在最后，则应该放在最后一个，这样应该可以！

Answer 3

您应该切换最后两个语句。您问题中的第二个if语句也可以满足第三个条件。这样一秒钟，函数便退出了。

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;

这是什么：

如果为isTherapistIsUpdated === false，则渲染StepTwoPersonalInfo
如果isTherapistIsUpdate === true（暗示，因为第一个if不匹配）和isProfessionalInfoAdded === true，则呈现StepTwoTermsOfUse
在任何其他情况下，即表示isTherapistIsUpdated === true和isProfessionalInfoAdded === false，请渲染StepTwoProfessionalInfo

Answer 4

我认为如果您使用临时变量将逻辑结果设置为，则代码结果会更清晰...

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;

反应有条件的渲染

4 个答案: