React：クラスとそれに加えて変数クラスの使い方

Question

私はナビゲーション要素用の簡単な反応コンポーネントを作成しようとしています。これはこれまで私がこれまでやっていた方法です。

これは本当に簡単な質問ですが、classNameに変数値を追加するにはどうすればよいですか？この例では、すべての要素は、クラスitemを持っており、さらにクラスにactive

export default class Example extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { activeTab: 'Initial' }; 
     this.setActiveClassOnTab = this.setActiveClassOnTab.bind(this); 
     this.handleChangeTabs = this.handleChangeTabs.bind(this); 
    } 

    setActiveClassOnTab(tab) { 
     return this.state.activeTab === tab ? 'active' : ''; 
    } 

    handleChangeTabs(event) { 
     this.setState({ activeTab: event.target.textContent }); 
    } 

    render() { 
     return (
      <div className="ui compact menu"> 
       { this.props.menu.map((item) => { 
        return (<a className="item { this.setActiveClassOnTab(item.title) }" onClick={ this.handleChangeTabs } key={ item.title}>{ item.title }</a>); 
       }) } 
      </div> 
     ); 
    } 
} 

Answer 1

ES6 template literalsはここで素敵な、透明な溶液を次のようになります。

<a className={`item ${this.setActiveClassOnTab(item.title)}`} onClick={ this.handleChangeTabs } key={ item.title}>{ item.title }</a> 

Answer 2

文字列テンプレートを取得する最初の要素は、あなたが探しているものです：あなたは${と}の間に置く

<a className={`item ${this.setActiveClassOnTab(item.title)}`} /> 

何になります実行時に評価され置換されるため、文字列を連結することなく、探しているクラスを動的に挿入することができます。