Question

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

const left = slide.imageLeft; // introLeft

并进一步将其呈现在React Component中。但它以字符串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-loader实现动态类生成的可能方法。

Answer 1

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

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

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

Webpack＆amp; CSS-装载机。如何为React创建动态className？

1 个答案: