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类.areaGrid12或.areaGrid6或.areaGrid4，其外观应类似于Content_areaGrid12_6yth。我应该如何修复JSX才能使其正常工作？

Answer 1

Answer 2