ReactJS将动态类添加到手动类名

Question

我需要在常规类列表中添加动态类,但不知道如何(我正在使用babel),如下所示:

<div className="wrapper searchDiv {this.state.something}">
...
</div>

有任何想法吗？

谢谢

Answer 1

你可以这样做,普通的javascript:

__CODE__

或字符串模板版本

__CODE__ 用反叛.

这两种类型当然只是javascript,但第一种模式是传统类型.无论如何,在JSX中,用大括号括起来的任何东西都是以javascript的形式执行的,所以你基本上可以做任何你想做的事.但是将JSX字符串和大括号组合起来是一个禁忌的属性.

Answer 2

根据您在项目增长时需要添加的动态类的数量,可能值得在GitHub上查看JedWatson 的类名实用程序.它允许您将条件类表示为对象,并返回评估为true的那些.

以此作为其React文档的一个例子:

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

} 

由于React在状态更改时触发重新呈现,因此您的动态类名称会自然处理并与组件的状态保持同步.

Answer 3

一个简单的可能语法是:

<div className={`wrapper searchDiv ${this.state.something}`}>

Answer 4

这是Dynamic className的最佳选择，就像我们在Javascript中那样做一些串联。

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

Answer 5

[2022 年 4 月 21 日更新：在反引号前后添加花括号以防止错误]

您可以简单地使用条件来申请您想要的特定类别

<div className={`wrapper searchDiv ${this.state.something ? "class that you want" : ""}`}>

如果你想使用 makeStyle 类，你可以像这样使用它

<div className={`wrapper searchDiv ${this.state.something ? classes.specifiedClass : ""}`}>

Answer 6

使用钩子试试这个：

const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2"
]);

并将其添加到 className 属性中：

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

添加类：

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

删除类：

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

Answer 7

如果您需要根据状态条件出现的样式名称，我更喜欢使用这种结构：

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>

Answer 8

不要想这么复杂的解决方案。

这是解决您问题的最简单方法。

<div className={`wrapper searchDiv ${this.state.something}`}>
   ...
</div>