如何根据条件呈现不同的元素（反应 jsx）

Question

我想根据条件

在UI中显示数据table中的某个按钮

伪代码

if assessment.category is complete
//show success button

if assessment.category is not complete
//show failed button

if assessment.category is in progress
//show in progress button

if assessment.category is rejected
//show rejected button

(JSX)

<td>
  {assessment.categoryCategory === 'Complete' && <button type="button" className="btn btn-success">Complete</button> 
  }
  {assessment.categoryCategory === 'Not Complete' && <button type="button" className="btn btn-info">Not Completed</button>
  }
  {assessment.categoryCategory === 'In Progress' && <button type="button" className="btn btn-warning">WIP</button>
  }
  {assessment.categoryCategory === 'Rejected' && <button type="button" className="btn btn-danger">Rejected</button>
  }
</td>

然而这是错误的。它抛出一个错误。 Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

<td>
  {
   assessment.categoryCategory === 'Complete' ?  (
    <button type="button" className="btn btn-success">Complete</button>
    ) : (
    <button type="button" className="btn btn-info">Not Completed</button>
    )
  }
</td>

Answer 2

为什么不这样简化呢？

<td>
  <button type="button" className={assessment.categoryCategory === 'Complete' ? "btn btn-success" : "btn btn-info"}>
    {assessment.categoryCategory === 'Complete' ? "Complete" : "Not Complete"}
  </button>
</td>

Answer 3

const btnMap = {
 complete : { key: 'warning', label: 'Completed' },
 'not complete' : { key: 'info', label: 'Not Completed' },
 progress : { key: 'warning', label: 'WIP'},
 rejected : { key: 'danger', label: 'Rejected' },
 // easy to add additional values if needed.
}
const btnItem = btnMap[assestment.category || 'not progress']; //set a default value if you believe could be undefined.

 <button 
   type="button" 
   className={`btn btn-${btnItem.key}`}>
    {btnItem.label}
 </button>

如何根据条件呈现不同的元素（反应 jsx）

How to render a different element based on a condition (react jsx)

javascript

jsx

reactjs