Question

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


// 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"

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

Answer 1

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

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

Used this as a reference.

Answer 2

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

将多重className传递为道具

2 个答案: