Question

如何在特定条件下隐藏按钮

{ !groupAccountPatientView && location.pathname.includes('group-accounts') &&
                     <button title="Main Patient" onClick={() =>browserHistory.push(`/patients/${patientInfo.PatientID}/`)} className="dashboard-patients-header_user">
                     <UserSolidIcon/>
                     </button>

                     ||
                     <div className="patients-header_extras">
                    <div className="patients-header_extras_switch">  
                      {!groupAccountPatientView && <button title="Patient Group" onClick={() =>browserHistory.push(totalGroupedPatientCount >1 ? `/patients/${patientInfo.PatientID}/group-accounts`: '#')} className="patients-header_extras_group patients-header_extras_switch_button">
                      <PatientsGroupIcon />
                      <span>({totalGroupedPatientCount>1?totalGroupedPatientCount:0})</span>
                      </button>}
                      </div>

这是我的状况

totalGroupedPatientCount !==0

当count等于show时，不必显示按钮，否则显示它。怎么可能？

Answer 1

使用一个非常人为的例子，这是一种实现方法。

class App extends React.Component {
  state = {
    showButton: false
  };
  render() {
    const { showButton } = this.state;
    let button;

    if (showButton) {
      button = <button>Some Button</button>;
    } else {
      button = null;
    }

    return (
      <div className="App">
        {button}
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

您也可以内联，我更喜欢

class App extends React.Component {
  state = {
    showButton: true
  };
  render() {
    const { showButton } = this.state;
    return (
      <div className="App">
        {showButton && <button> Hello </button>}
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

Answer 2

就像在FP1-F7 F7-T3 T3-T5 T5-O1之前一样，只需在(totalGroupedPatientCount !==0) &&之前插入!!totalGroupedPatientCount &&或<button

Answer 3

您可以定义状态totalGroupedPatientCount

然后添加它以在条件为真时显示组件

{ this.state.showMyComponent && <MyComponent /> }

如何在特定情况下隐藏按钮？

3 个答案: