传递类名称以响应组件

Question

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

class Pill extends React.Component {

  render() {

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

}

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

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

Answer 1

在React中，当您想传递一个解释表达式时，必须打开一对花括号。尝试：

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>
  );
}