Webpack & Css-loader。如何为 React 创建动态类名？

Question

该项目有以下引用，其中returns一个字符串：

const left = slide.imageLeft; // introLeft

并进一步在 React Component 中渲染它。但是它 returns 作为一个字符串 styles.imageLeft 并且因为 webpack 确实将它转换成相应的捆绑 class 就像 914u923asdsajdlj1l23 样式没有被应用。

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

P.S 我确实尝试了 eval，但出现了 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 实现动态 class 生成的可能方法。

Answer 1

您必须在 render() 或组件定义中定义样式，例如

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

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

Webpack & Css-loader。如何为 React 创建动态类名？

Webpack & Css-loader. How to create dynamic className for React?

reactjs

webpack

webpack-style-loader

css-loader

webpack-2