[解決済み] リアクトコンポーネントにクラス名を渡す

質問

リアクトコンポーネントにクラス名を渡してスタイルを変更しようとしているのですが、うまくいきません。

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

を使うことで クラス名 npm パッケージ

import classnames from 'classnames';

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