传递类名称以响应组件 [英] Passing in class names to react components

问题描述

我试图将类名传递给react组件以更改其样式，并且似乎无法正常工作:

I am trying to pass in a classname to a react component to change it's style and cannot seem to get working:

class Pill extends React.Component {

  render() {

    return (
      <button className="pill {this.props.styleName}">{this.props.children}</button>
    );
  }

}

<Pill styleName="skill">Business</Pill>

我试图通过传递具有相应样式的类的名称来更改药丸的样式.我是React的新手，所以也许我做的方式不正确.谢谢

I am trying to change the style of the pill by passing in the name of the class that has the respective style. I am new to React so maybe I am not doing this the right way. Thanks

推荐答案

在React中，当您要传递一个解释表达式时，必须打开一对花括号.试试:

In React, when you want to pass an interpreted expression, you have to open a pair of curly braces. Try:

render () {
  return (
    <button className={`pill ${ this.props.styleName }`}>
      {this.props.children}
    </button>
  );
}

使用类名 npm包

import classnames from 'classnames';

render() {
  return (
    <button className={classnames('pill', this.props.styleName)}>
      {this.props.children}
    </button>
  );
}

这篇关于传递类名称以响应组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！