我如何使用带有“.”的参数操作员？

Question

我将 React 与 CSS 模块一起使用，我的代码有很多重复行。

所以，我用函数来简化。这是我的代码。

const SassComponent = () => {
  function stylesBox(color) { return `${styles.box} ${styles}.${color}` }
  return (
    <div className={styles.SassComponent}>
        <div className={stylesBox('red')} />
        <div className={`${styles.box} ${styles.orange}`} />
        <div className={`${styles.box} ${styles.yellow}`} />
        <div className={`${styles.box} ${styles.green}`} />
                          .....

当我将 'color' 参数与“.”运算符一起使用时，我遇到了问题。没用！

我该如何解决？

感谢阅读。

Answer 1

尝试：

${styles[color]}

而不是

${styles}.${color}

我如何使用带有“.”的参数操作员？

How can i use argument with '.' operator?

javascript

reactjs

sass

css-modules