Question

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

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

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

Answer 2

您可以使用三元运算符来确定要使用的类。

这就像一个简短的if else语句。

condition is true ? useTrueClass : otherwiseUseThisClass

假设每个按钮都有一个变量，用于跟踪所述按钮的状态。使用该变量设置条件。

<span className={isActive ? activeBtnClass: inactiveBtnClass}>Active</span>

Answer 3

根据项目增长需要添加的动态类的数量，可能值得在GitHub上查看JedWatson的classnames实用程序。它使您可以将条件类表示为对象，并返回评估为true的条件类。

以它的React文档为例：

import classnames from "classnames";

/**
 * *
 */

let btnClass = classnames({
    'inactiveBtn': this.state.text === 'Inactive',
    'activeBtn': this.state.text === 'Active',
    'deletedBtn': this.state.text === 'To be Delted'
});

<span className={btnClass}>this.state.text</span>;

由于状态变化时React会触发重新渲染，因此动态类名会自然处理并与组件状态保持最新。

希望这对您有帮助！

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

3 个答案: