Webpack＆Css-loader。 Reactの動的classNameの作成方法

Question

プロジェクトでは、文字列を返し、次の参照を持っている：

const left = slide.imageLeft; // introLeft 

し、さらには、それが内部コンポーネントに反応レンダリングします。しかし、それは文字列styles.imageLeftとして返され、webpack doestは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-ローダーのための動的クラスの生成を達成することが可能な方法を提案してくださいすることができます。

Answer 1

あなたはrender()内のスタイルを定義する必要があり、またはあなたがしなければならないすべてはスタイルに変更することがあるので、コンポーネント定義の中に、方法でこの

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

のように、これは、すでに動的であり、コンポーネントが更新時に再レンダリングされることを確認します