将多个className作为道具传递
将多个className作为道具传递
提问于 2019-12-26 03:29:45
我有一个使用css模块作为样式方法的模块化组件，比如说component.js和component.module.scss。我想要实现的是使用带有className的组件作为工具。
// component.js
import React from 'react';
import Style from './grid.module.scss';
const Grid = (props) => {
return(
<div className={`${Style[props.test]}`}>
{props.children}
</div>
)
}
export default Grid;// component.module.scss
.foo {
// some style here...
}
.bar {
// some style here...
}问题是，如果属性有多个类名，Style[props.test]就不能工作。
例如
// index.js
import React from 'react';
import Grid from './component';
// Working
<Grid test="a">Baz</Grid> // the output is class="a--3ofml"
// doesnt work
<Grid test="a b">Baz</Grid> // the output is class="undefined"如何让代码与多个属性值一起工作？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-26 03:44:38
看起来你可以这样做：
return (
<div className={
props.test.split(' ').map(s => `${Style[s]}`).join(' ')
}>
{props.children}
</div>
)Stack Overflow用户
发布于 2019-12-26 03:42:29
const Grid = (props) => {
let cls = props.test.split(" ");
let styleNames = "";
cls.forEach(el => {
styleNames = styleNames + Style[el] + " ";
})
return (
<div className={styleNames}>
{props.children}
</div>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59481299
复制相关文章
相似问题
腾讯云开发者
