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}>&nbsp; &nbsp;{/* your implementation */}</div>考虑以下几点：const css = { areaGrid: 'area' };const area = { grid: 'else' };console.log(`${css.areaGrid}${area.grid}`);或者，如果您在css变量中有一个属性列表 - 显然您的情况下的值是不同的：const area = { grid: '12' };const css = {&nbsp; areaGrid12: 'twelve',&nbsp; areaGrid6: 'six',&nbsp; areaGrid4: 'four'};const result = `${css[`areaGrid${area.grid}`]}`;console.log(result);

Answer 2

这就是我要找的....谢谢Emile Bergeron&nbsp;!!!className={css[`areaGrid${area.grid}`]}

Answer 3

如果这样做，它会起作用：let cssClass = '';if (area.grid === '12') {&nbsp; &nbsp; cssClass = css.areaGrid12;} else if (area.grid === '6') {&nbsp; &nbsp; cssClass = css.areaGrid6;} else if (area.grid === '4') {&nbsp; &nbsp; cssClass = css.areaGrid4;}<div className={cssClass}> .....但是这个解决方案恕我直言不是很灵活；）