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

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

foreach ($this->data as $key => $value) 
{
    $this->$key;
}

Answer 2

感谢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 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>
          )


  }
}

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

3 个答案: