ReactJS должен условно отображать разные onclick vs Link на основе логики - PullRequest
Новая
       46

ReactJS должен условно отображать разные onclick vs Link на основе логики

0 голосов
/ 30 сентября 2019

Цель У меня есть это, чтобы отобразить другой HTML с onclick против маршрута

Без логики в Render () 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>

Ниже приведен СТАРЫЙ код ДО перехода к условному, ниже не код iхочу, только для справки.

onclick 

<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>

1 Ответ

2 голосов
/ 30 сентября 2019

Почему бы вам не сделать условную визуализацию либо 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 Router Link. Вы можете просто передавать имена классов в качестве реквизита, например:

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

...