ReactJS需要根据逻辑有条件地显示不同的onclick vs Link

Question

目标我让它用 onclick 和 route 显示不同的 HTMLRender() 中没有逻辑 const contents = this.state.data.map(item => (这是我挣扎的逻辑<button id={item.Member_ID} type="button"  {` ${this.isExist(item.Member_ID) ? <Link to='surveysai/'>      <button type="button" className='btn btn-success'>SAI</button>  </Link>                 : ${onClick={(e) => this.downloadUser(item.Member_ID, e)}}`}    className={`btn ${this.isExist(item.Member_ID) ? "btn-success" : "btn-warning"}`} > {this.isExist(item.Member_ID) ? "SAI" : "Ready for Download"}</button>这适用于按钮类：<button id={item.Member_ID} type="button" className={`btn ${this.isExist(item.Member_ID) ? "btn-success" : "btn-warning"}`} > {this.isExist(item.Member_ID) ? "SAI" : "Ready for Download"}</button>   以下是更改为条件之前的旧代码，以下不是我想要的代码，仅供参考。点击<button id={item.Member_ID} type="button" onClick={(e) => this.downloadUser(item.Member_ID,e)}       className={() => this.checkItem(item.Member_ID)}>Ready for Download</button>链接路由重定向<Link to='surveysai/'>    <button type="button" className="btn btn-success">SAI</button>                   </Link>

Answer 1

为什么不有条件地渲染Link按钮或按钮。

{this.isExist(item.Member_ID) ? (

  <Link to='surveysai/'>

      <button type="button" className='btn btn-success'>SAI</button>  

  </Link>

) : (

  <button 

    onClick={(e) => this.downloadUser(item.Member_ID, e)}

    className={`btn ${this.isExist(item.Member_ID) ? "btn-success" : "btn-warning"}`}> {this.isExist(item.Member_ID) ? "SAI" : "Ready for Download"} . 

  </button>

)}

此外，Link假设这是一个 React RouterLink组件，您实际上不需要在 a 内部渲染按钮。您可以将类名作为道具传递，例如：

<Link to="/wherever" className="btn btn-success" />