代码之家 › 专栏 › 技术社区 › 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 /> }

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

5 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

6 月前