reactjs - 如何使用 React.js 在跨度上呈现不同的类？

Question

<span className="inactiveBtn">Inactive</span>
    <span className="activeBtn">Active</span>
    <span className="deletedBtn">To be Delted</span>

我在我的表格列中使用这 3 个跨度，但我想动态呈现它，就像文本处于活动状态、非活动状态或已删除一样，它应该将其各自的类和文本呈现到跨度。

标签： reactjs

Answer 1

您可以将三个选项存储在一个数组中：

const options = [{label: 'Inactive', class: 'inactiveBtn'},
{label: 'Active', class: 'activeBtn'},
{label: 'To Be Deleted', class: 'deletedBtn'}];

{options.map((item, index) => 
 <span key={index} className={item.class}>{item.label}</span> )}