Css 将Multiple类名作为道具传递

我有一个使用css模块作为样式化方法的模块化组件，比如component.js和component.module.scss。我想要实现的是使用className作为prop的组件

//component.js 从“React”导入React； 从“/grid.module.scss”导入样式； 常量网格=道具=>{ 回来 {props.children} } 导出默认网格； 问题是，如果props有多个类名，样式[props.test]就不起作用

比如说

//index.js 从“React”导入React； 从“./component”导入网格； //工作 Baz//输出为class=a-3ofml //不起作用 Baz//输出为class=未定义

---

如何使使用多个道具的代码具有价值？

看起来您可以这样做：

const Grid = (props) => {
    let cls = props.test.split(" ");
    let styleNames = "";
    cls.forEach(el => {
        styleNames = styleNames + Style[el] + " ";
    })
    return (
        <div className={styleNames}>
            {props.children}
        </div>
    )
}

return (
   <div className={
      props.test.split(' ').map(s => `${Style[s]}`).join(' ')
    }>
      {props.children}
   </div>
)

---

看起来您可以执行以下操作：

return (
   <div className={
      props.test.split(' ').map(s => `${Style[s]}`).join(' ')
    }>
      {props.children}
   </div>
)