gpt4 book ai didi

ReactJS基于props设置css类

转载 作者:行者123 更新时间:2023-12-04 03:14:29 25 4
gpt4 key购买 nike

我正在使用 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 时,我都必须创建该数组的副本,所以显然不是一个很好的解决方案,尤其是随着列表的增长。

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

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

最佳答案

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

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

关于ReactJS基于props设置css类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42329047/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com