ReactJS基于props设置css类

Question

我正在使用 react 来构建一个列表应用程序，我想根据不同的事件添加 css 类。我想我可以根据将不同的 props 传递给组件来轻松添加/删除类。列表项从 store 发送，并在容器中处理，不同 props 到 css 类的转换是在组件中完成的。

目前我创建了一个包含容器中所有项目的数组，如下所示:

this.state = {
    items: this.props.items.map(function(item){
        return <ItemWrapper><item/></ItemWrapper>
    })
}

然后，在 ItemWrapper 中，例如:

(if this.props.isActive) {
    return <li className='active'>{this.props.children}</li>
}

因此，每当我想将“事件”类添加到项目时，我都会在其上设置“isActive” Prop 。

但是因为所有项目都保存在容器状态的数组中，所以每次我想更改“isActive” Prop 时，我都必须创建该数组的副本，所以显然不是一个很好的解决方案，尤其是随着列表的增长。

我曾想过在状态中将每个项目保存在自己的键下，但是如果我想通过计时事件添加类 - 比如说将一个类添加到一个元素，然后每隔一段时间从另一个元素中删除它 - 就变得很困难。

管理这些类更改的最有效方法是什么？

Answer 1

您可以使用三元运算符轻松完成此操作:

<li className={this.props.isActive ? 'isActive' : ''}>{this.props.children}</li>