javascript - ReactJS中按钮和普通文本之间的条件渲染

Question

我有一个对象数组说defect，现在如果缺陷的状态是打开的，那么它应该显示为按钮，它应该读取关闭缺陷，如果它是关闭的，那么作为按钮，它应该只是提到关闭。所以，这statusRender就是问题所在，现在正在按最后一列中的预期工作。无法弄清楚我错过了什么。有什么线索吗？

render() {

  if (defect.defect_status == 'open') {
    statusRender = <button key={index} data-id={defect.id} onClick={() => this.showAlert(defect.defect_id)}>{defect.defect_status}</button>;
  } else {
    statusRender = { defect.defect_status };
  }
  return (
    <div>
      <table className="table table-bordered table-hover">
        <thead>
          <tr>
            <th>Defect ID</th>
            <th>Category</th>
            <th>Description</th>
            <th>Priority</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {this.state.defectList.map((defect, index) => {
            return (
              <tr key={index}>
                <td> {defect.defect_id}  </td>
                <td>{defect.defect_category}</td>
                <td>{defect.defect_description}</td>
                <td>{defect.defect_priority}</td>
                <td> {statusRender}
                </td>
              </tr>
            );
          })
          }
        </tbody>
      </table>
    </div>
  )
}

标签： javascriptreactjsfrontend

Answer 1

这是一个范围问题，您不能在 map 函数之外声明缺陷

{this.state.defectList.map((defect,index) => {
 return (
    <tr key={index}>   
      <td> {defect.defect_id}  </td>
      <td>{defect.defect_category}</td>
      <td>{ defect.defect_description}</td>
      <td>{ defect.defect_priority}</td>
      <td> 
        { 
          defect.defect_status === 'open' 
           ? <button key={index} data-id={defect.id} onClick = {() => this.showAlert(defect.defect_id)}>{defect.defect_status}</button>;
           : defect.defect_status;
        }
      </td>    
    </tr>
   );      
 })
}