javascript - 传递类名称以响应组件

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

class Pill extends React.Component {

  render() {

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

}

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

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

最佳答案

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

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

使用classnames npm包

import classnames from 'classnames';

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

关于javascript - 传递类名称以响应组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32230635/