你如何在反应中传递动态css类？答案

【问题标题】：How do you pass dynamic css classes in react?你如何在反应中传递动态css类？
【发布时间】：2022-01-15 15:36:53
【问题描述】：

我有一张图片，其中图片上的 CSS 类需要动态更改。它是从这个对象从键“size”动态传入的：

export const decals = [
  { label: 'Nikola Tesla', img: `/images/decals/tesla.svg`,  size: `decalMed` },
  { label: 'Tattoo Mom Heart', img: `/images/decals/ARF149.svg`, size: `decalSm`}

在这里进入另一个组件：

import styles from ./Shirt.module.css';
<img key={decals[decal].label} src={decals[decal].img} alt={decals[decal].label} className={`${styles}.${decals[decal].size}`}/>

className= 是问题所在。我尝试了很多不同的方法来通过这门课。

在传递给图像标签之前，我已将此 (decals[decal].size) 捕获到一个变量中。我尝试使用样式标签而不是 className 并创建了一个变量来保存该类。我已经改变了括号。我已经尝试将它传递给外部 div。

似乎没有任何效果。

我想知道是否有人能找到反应新手。谢谢！

【问题讨论】：

你能提供更多信息吗？因为我不知道你想达到什么目的
你可以这样写：className={styles[decals[decal].size]} 因为styles 只是一个对象。见github.com/css-modules/css-modules#css-modules
@AjeetShah 谢谢！这正是我想要的。

标签： javascript css reactjs jsx

【解决方案1】：

如果我没记错的话，您尝试动态管理传递给图像元素的类。为此，我建议您使用“类名” https://www.npmjs.com/package/classnames

使用这个包，您可以使用组件中的变量来控制类名。我将尝试通过一个小例子来解释用法。

你的样式文件喜欢

.yourParentClass {
    &.decalMedClass {
        // your styles for this class
    }
    &.decalSmClass {
        // your styles for this class
    }
}

你的组件文件像

import Style from '../style.scss';   // Your classes
var classNames = require('classnames/bind');  // classname package
const cx = classNames.bind(Style);

// your code
render() {
    return (
        <img className={
            cx({
                yourParentClass: true,
                decalMedClass: this.state.sizeMed,
                decalSmClass: !this.state.sizeMed,
            })
        }
        />
    );
}

基本上，你告诉那个班级将是活跃的。请不要拘泥于我的例子，npm 页面上有很好的例子。

【讨论】：