javascript - 传入类名以响应组件

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

使用 classnames npm 包

import classnames from 'classnames';

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