按钮与普通文本之间的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>
  )
}

Answer 1

多亏了user1095118，移除分号完成了这项工作。我错过了解决这个问题的花括号的正确性。

{ 
          defect.defect_status == 'open' 
           ?<button key={index} data-id={defect.id} onClick = {() => this.showAlert(defect.defect_id)}>{defect.defect_status}</button> : defect.defect_status
        }

Answer 2

这是一个范围问题，您不能在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>
   );      
 })
}

Answer 3

如果您只需要访问状态字符串而不是按钮，也许您应该删除If else语句中的括号。

​

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 {
  // No brackets here ? 
  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>
          )


  }
}

​