reactjs - 使用 css-modules 更改基于 props 的 React 组件 CSS

Question

我有以下内容:

className={`${this.props.match.params.id}.alert`}

/* desired output = `className="style_alert__3TLGs"` */
/* instead output = `className="style.alert"` */

如果我对 className 进行硬编码(例如 {style.alert})，我会得到所需的输出。似乎结果是一个字符串，并且没有由 css-module 包处理(可能是因为它是在之后渲染的？)，我如何更改它，以便 className 由 css-module 处理并按我的意图捆绑？

引用文档:css-modules

Answer 1

选项 1:导入您知道将使用的所有样式模块

创建导入的“样式”对象的映射，以通过 Prop 中传递的 id 进行键控。只需确保所有“style”对象都具有相同的 CSS 属性，例如“alert”，当然，在 id 参数的对象路径上使用保护模式，这样就不会出现“未定义的”访问.

import styles1 from "....";
import styles2 from "....";
...

const stylesMap = {
  style1Id: styles1,
  style2Id: styles2,
  ...
};

...

className={stylesMap[this.props.match.params.id].alert}

优点:预先加载您需要的所有 CSS 模块，并且可能更容易推理和调试

缺点:使用更多资源

选项 2:使用动态导入

创建一个异步函数来“获取”所需的 CSS 模块，并使用组件生命周期函数或效果 Hook 来更新样式对象引用。

const loadStyle = async (...params) => {
  try {
    const styleObject = await import(...path and module name from params);
    // setState or useState setter to set style object
  } catch {
    // set a fallback style object
  }
}
...

componentDidMount() {
  // check props.match.params.id
  // gather up other CSS module path details
  // trigger dynamic CSS module load
  loadStyle(... CSS module path detials);
}
**OR**
useEffect(() => {
  // check props.match.params.id
  // gather up other CSS module path details
  // trigger dynamic CSS module load
  loadStyle(... CSS module path detials);
}, [props.match.params.id, ...any other dependencies]);

...

className={stylesMap[<this.>state.styleObject].alert}

优点:尺寸更小/资源使用更少。

缺点:由于未提前获取资源，渲染时可能会出现更多延迟。

注意:此外，一切都取决于您的应用使用情况、需求和要求。例如，如果它是一个捆绑应用程序(例如 cordova/phonegap、Electron 等)，那么包含您需要的所有资源会更明智。