JSX：如何使用 2 个字符串和 css 模块创建 css 类 [重复]答案

【问题标题】：JSX: How to create a css-class using 2 string and css modules [duplicate]JSX：如何使用 2 个字符串和 css 模块创建 css 类 [重复]
【发布时间】：2020-03-17 01:09:10
【问题描述】：

我在我的React 应用程序中使用CSS Modules。需要设置一个由 2 个字符串组成的类，然后转换为模块。

示例。

import React from 'react';
import css from './ContentMedia.module.css';

const Content = (props) => {
    return (
        <div className={css.container}>
           {props.areas && 
               props.areas.map((area) => {
                   return (
                       <div className={`css.areaGrid${area.grid}`} key={area.id}>
                          ...
                       </div>
                   );
               });
           }
        </div>
    );
};

export default Content;

如果我将类设置为className={css.areaGrid${area.grid}}，我会收到错误的结果（见下图）。但我需要接收一个预定义的 css 类 .areaGrid12 或 .areaGrid6 或 .areaGrid4，它应该看起来像 Content_areaGrid12_6yth。我应该如何修复 JSX 以使其正常工作？

【问题讨论】：

标签： javascript css reactjs jsx css-modules

【解决方案1】：

我认为您需要的是以下内容：

<div className={`${css.areaGrid}${area.grid}`} key={area.id}>
   {/* your implementation */}
</div>

想一想：

const css = { areaGrid: 'area' };
const area = { grid: 'else' };

console.log(`${css.areaGrid}${area.grid}`);

或者，如果您在 css 变量中有一个属性列表 - 显然您的情况下的值是不同的：

const area = { grid: '12' };
const css = {
  areaGrid12: 'twelve',
  areaGrid6: 'six',
  areaGrid4: 'four'
};

const result = `${css[`areaGrid${area.grid}`]}`;

console.log(result);

我希望这会有所帮助！

【讨论】：

谢谢兄弟，但这不是我要找的......
请注意间距，具体取决于您想要areaelse 还是area else。虽然看起来 OP 想要className={css[`areaGrid${area.grid}`]}
@EmileBergeron 感谢您指出这一点。刚刚用你的建议扩展了答案。

【解决方案2】：

这就是我要找的……谢谢Emile Bergeron！！！

className={css[`areaGrid${area.grid}`]}

【讨论】：

【解决方案3】：

如果这样做，它会起作用：

let cssClass = '';

if (area.grid === '12') {
    cssClass = css.areaGrid12;
} else if (area.grid === '6') {
    cssClass = css.areaGrid6;
} else if (area.grid === '4') {
    cssClass = css.areaGrid4;
}

<div className={cssClass}> .....

但是恕我直言，这个解决方案不是很灵活;)

【讨论】：

或者只是className={css[`areaGrid${area.grid}`]}