JSX：如何使用 2 个字符串和 css 模块创建 css 类

Question

我CSS Modules在我的React应用程序中使用。需要设置一个由 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-class.areaGrid12或者.areaGrid6or.areaGrid4应该看起来像 ie Content_areaGrid12_6yth。我应该如何修复 JSX 以使其工作？

Answer 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);

Answer 2

这就是我要找的....谢谢Emile Bergeron !!!

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

Answer 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}> .....

但是这个解决方案恕我直言不是很灵活；）