React：classNameの指定例

classNameを動的に指定する方法のメモ。もっといい方法あるのかな。

var sldsTabClass = 'slds-tabs--default__item slds-text-heading--label';
var homeTabClass = this.props.currentpage === 'Home' ? 'slds-active ' + sldsTabClass : sldsTabClass;
var aboutTabClass = this.props.currentpage === 'About' ? 'slds-active ' + sldsTabClass : sldsTabClass;
var portfolioTabClass = this.props.currentpage === 'Portfolio' ? 'slds-active ' + sldsTabClass : sldsTabClass;
var contactTabClass = this.props.currentpage === 'Contact' ? 'slds-active ' + sldsTabClass : sldsTabClass;

return (
  <header id="pageHead">
    <h1 id="siteTitle">T.Yoshikawa Labs</h1>
    <p id="catchcopy">~ React Sample Application ~</p>

    <div className="slds-tabs--default slds-m-bottom--small">
      <ul className="slds-tabs--default__nav">
        <li className={homeTabClass} title="Home">
          <Link to="/" className="slds-tabs--default__link">Home</Link>
        </li>
        <li className={aboutTabClass} title="About">
          <Link to="/about" className="slds-tabs--default__link">About</Link>
        </li>
        <li className={portfolioTabClass} title="Gallery">
          <Link to="/portfolio" className="slds-tabs--default__link">Gallery</Link>
        </li>
        <li className={contactTabClass} title="Contact">
          <Link to="/contact" className="slds-tabs--default__link">Contact</Link>
        </li>
      </ul>
    </div>
  </header>
);