Webpack 和 Css 加载器。如何为 React 创建动态类名？答案

【问题标题】：Webpack & Css-loader. How to create dynamic className for React?Webpack 和 Css 加载器。如何为 React 创建动态类名？
【发布时间】：2017-07-24 07:29:34
【问题描述】：

该项目有以下引用，它返回一个字符串：

const left = slide.imageLeft; // introLeft

并在 React Component 中进一步渲染它。但它以字符串 styles.imageLeft 的形式返回，并且由于 webpack 不会将其转换为相应的捆绑类，例如 914u923asdsajdlj1l23，因此不会应用样式。

<div className={`styles.${left}`}>&nbsp;</div>

P.S我确实尝试过评估，但它丢弃了 2 个错误。

There is an internal error in the React performance measurement code. Did not expect componentDidMount timer to start while render timer is still in progress for another instance.

和

ReferenceError: styles is not defined

您能否建议为 css-loader 实现动态类生成的可能方法。

【问题讨论】：

您能否阐明您希望实现的目标以及当前的问题是什么？您是否使用 css-loader 提供的 CSS 模块选项？

标签： reactjs webpack webpack-2 webpack-style-loader css-loader

【解决方案1】：

你必须在render()中定义样式，或者在组件定义中，像这样

render: function(){
  var myStyle = {
    // your style rules go here
  };
  return(
    <div style={myStyle}>
      {this.props.children}
    </div>
  )
}

在某种程度上，这已经是动态的，因为您所要做的就是更改样式，它会确保组件在更新时重新渲染

【讨论】：