代码之家 › 专栏 › 技术社区 › Lex V

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

reactjs

Lex V · 技术社区 · 6 年前

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

{ !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时,不必显示按钮,否则显示它。怎么可能??

3 回复 | 直到 6 年前

xadm 6 年前

只需插入 (totalGroupedPatientCount !==0) && 或 !!totalGroupedPatientCount && 之前 <button 就像你以前那样 !groupAccountPatientView &&

Paul McLoughlin 6 年前

这里有一种方法,使用一个非常做作的例子。

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

Ennar.ch 6 年前

你可以定义一个状态 totalGroupedPatientCount

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

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

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

1 年前

Anaya Ammar · 渲染后未显示的值

1 年前

matin kahrizi · 当我的状态更改时,useSelector不更新

1 年前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Zemelon · -moz背面可见性不适用于顺风css

1 年前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

1 年前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

1 年前

Mark C. · 制作一个可松开的单选按钮[关闭]

1 年前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

1 年前