更好的方式來操作classNames並處理clickjs中的點擊

Question

React和JSX的新手，我正在試圖包裝頭腦如何更優雅地或高效地操作類和管理點擊事件。我正在研究兩個組件（其中一個越來越大）--Greatlakes & InfoSide。在Greatlakes組件中，我試圖將一些類添加到圖表中的一系列不同元素中，這些元素被點擊。我在這裏有一個工作組件，但是它隨着狀態布爾變得臃腫，然後在render（）中確定狀態if/else語句。

我的下一步是將這個Greatlakes組件分解成一些子組件，並尋找讓孩子點擊事件影響父母狀態的方法......任何指導都會非常有幫助。

import React from 'react' 
import InfoSide from 'js/modules/InfoSide' 

import 'stylesheets/modules/greatlakes.scss' 

export default React.createClass({ 
    getInitialState:function(){ 
     return{ 
      clicked: false, 
      keyClicked: false, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      federalClicked: false, 
      fedSectionClicked: false, 
      aquaSectionClicked: false, 
      polSectionClicked: false, 
      glriClicked: false, 
      glcClicked: false, 
      allianceClicked: false, 
      nwfClicked: false 
     }; 
    }, 
    handleAquaClick: function(){ 
     if(!this.state.aquaticClicked)this.setState({ 
      clicked: true, 
      aquaticClicked:true, 
      pollutedClicked: false, 
      federalClicked: false, 
      glriClicked: false, 
      fedSectionClicked: false, 
      glcClicked: false, 
      allianceClicked: false 
     }) 
     else this.setState({aquaticClicked: false, clicked: false}) 
    }, 
    handlePollutedClick: function(){ 
     if(!this.state.pollutedClicked)this.setState({ 
      clicked: true, 
      pollutedClicked:true, 
      aquaticClicked: false, 
      federalClicked: false, 
      glriClicked: false, 
      fedSectionClicked: false, 
      glcClicked: false, 
      allianceClicked: false 
     }) 
     else this.setState({pollutedClicked: false, clicked: false}) 
    }, 
    handleFederalClick: function(){ 
     if(!this.state.federalClicked)this.setState({ 
      clicked: true, 
      federalClicked:true, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      glriClicked: false, 
      fedSectionClicked: false, 
      glcClicked: false, 
      allianceClicked: false 
     }) 
     else this.setState({federalClicked: false, clicked: false}) 
    }, 
    handleGlriClick: function(){ 
     if(!this.state.glriClicked)this.setState({ 
      clicked: true, 
      federalClicked:false, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      glriClicked: true, 
      fedSectionClicked: true, 
      glcClicked: false, 
      allianceClicked: false 
     }) 
     else this.setState({federalClicked: false, glriClicked: false, fedSectionClicked: false, glcClicked: false, clicked: false}) 
    }, 
    handleGlcClick: function(){ 
     if(!this.state.glcClicked)this.setState({ 
      clicked: true, 
      federalClicked:false, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      glriClicked: false, 
      fedSectionClicked: true, 
      glcClicked: true, 
      allianceClicked: false 
     }) 
     else this.setState({federalClicked: false, glriClicked: false, fedSectionClicked: false, glcClicked: false, clicked: false}) 
    }, 
    handleAllianceClick: function(){ 
     if(!this.state.allianceClicked)this.setState({ 
      clicked: true, 
      federalClicked:false, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      glriClicked: false, 
      fedSectionClicked: true, 
      glcClicked: false, 
      allianceClicked: true, 
      aquaSectionClicked: true, 
      polSectionClicked: true, 

     }) 
     else this.setState({federalClicked: false, glriClicked: false, fedSectionClicked: false, glcClicked: false, allianceClicked: false, clicked: false}) 
    }, 
    handleNwfClick: function(){ 
     if(!this.state.allianceClicked)this.setState({ 
      clicked: true, 
      federalClicked:false, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      glriClicked: false, 
      fedSectionClicked: true, 
      glcClicked: false, 
      allianceClicked: true, 
      aquaSectionClicked: true, 
      polSectionClicked: true, 
      nwfClicked:true 
     }) 
     else this.setState({federalClicked: false, glriClicked: false, fedSectionClicked: false, glcClicked: false, allianceClicked: false, nwfClicked:false, clicked: false}) 
    }, 
    handleKeyClick: function(){ 
     if(!this.state.keyClicked) this.setState({keyClicked:true}); 
     else this.setState({keyClicked: false}) 
    }, 
    render: function(){ 
     var glContentClick = this.state.clicked ? 'on' : ''; 
     var keyClick = this.state.keyClicked || this.state.allianceClicked || this.state.nwfClicked ? 'on' : ''; 
     var aq = this.state.aquaticClicked ? 'on' : ''; 
     var pol = this.state.pollutedClicked ? 'on' : ''; 
     var fed = this.state.federalClicked ? 'on' : ''; 
     var tierAq = this.state.aquaticClicked || this.state.aquaSectionClicked ? 'tier two on' : 'tier two'; 
     var tierPol = this.state.pollutedClicked || this.state.polSectionClicked ? 'tier two on' : 'tier two'; 
     var tierFed = this.state.federalClicked || this.state.fedSectionClicked ? 'tier two on' : 'tier two'; 
     var glri = this.state.glriClicked ? 'title on' : 'title'; 
     var glc = this.state.glcClicked ? 'title on' : 'title'; 
     var alliance = this.state.allianceClicked ? 'title on' : 'title'; 
     var nwf = this.state.nwfClicked ? 'title on' : 'title'; 

     return(
      <div className='greatlakes view'> 
       <div className={'greatlakes-wrap '+glContentClick}> 
        <section className='intro'> 
         <h2>Great Lakes</h2> 
         <p>The Joyce Foundation seeks to protect and restore the Great Lakes by resolving the most critical basin-wide threats to the region’s water resources. The health and resilience of the Great Lakes may be significantly improved by simultaneously making progress on three interconnected issues: aquatic invasive species; runoff pollution, especially excess nutrients from cities and farms; and advancing and defending key state, regional, and federal policies and funding.</p> 
        </section> 
        <section className='key'> 
         <p className={keyClick} onClick={this.handleKeyClick}>View July 2016 Proposed Grants</p> 
        </section> 
        <section className='greatlakes-content'> 
         <h2 className='tier one'><span>Organizations Receiving Great Lakes Grant Payments in 2016</span></h2> 
         <div className={tierAq}> 
          <h3 onClick={this.handleAquaClick}><span>Aquatic Invasive Species</span></h3> 
          <ul className='tier three'> 
           <li className='title'><h4><span>Asian Carp</span></h4></li> 
           <li onClick={this.handleAllianceClick} className={keyClick}>Alliance for the Great Lakes</li> 
           <li>Freshwater Future</li> 
           <li>Great Lakes & St. Lawrence Cities Init.</li> 
           <li>Great Lakes Commission</li> 
           <li>NRDC</li> 
           <li onClick={this.handleNwfClick} className={keyClick}>NWF</li> 
          </ul> 
          <ul className='tier three'> 
           <li className='title'><h4><span>Ballast Water</span></h4></li> 
           <li onClick={this.handleAllianceClick} className={keyClick}>Alliance for the Great Lakes</li> 
           <li>NRDC</li> 
           <li onClick={this.handleNwfClick} className={keyClick}>NWF</li> 
          </ul> 
         </div> 
         <div className={tierPol}> 
          <h3 onClick={this.handlePollutedClick}><span>Poluted Runoff</span></h3> 
          <section className='tier three'> 
           <h4><span>Urban</span></h4> 
           <ul className='tier four'> 
            <li className='title'><h5><span>Policy Solutions</span></h5></li> 
            <li>CNT</li> 
            <li>Metropolitan Planning Council</li> 
            <li>State Advocates: <span className={keyClick}>OEC, MEC</span>, MEP, <span>Clean WI</span></li> 
           </ul> 
           <ul className='tier four'> 
            <li className='title'><h5><span>Pilots</span></h5></li> 
            <li>Chi Cal Rivers Fund</li> 
            <li>CNT</li> 
            <li>SWWT</li> 
           </ul> 
          </section> 
          <section className='tier three'> 
           <h4><span>Agriculture</span></h4> 
           <ul className='tier four'> 
            <li className='title'><h5><span>Policy Solutions</span></h5></li> 
            <li onClick={this.handleAllianceClick} className={keyClick}>Alliance for the Great Lakes</li> 
            <li>Freshwater Future</li> 
            <li>Great Lakes Commission</li> 
            <li>MI LCV Ed. Fund</li> 
            <li onClick={this.handleNwfClick} className={keyClick}>NWF</li> 
            <li>OSU StoneLab</li> 
            <li>State Advocates: <span className={keyClick}>OEC, MEC</span>, MEP, <span>Clean WI</span></li> 
            <li>US Water Alliance</li> 
           </ul> 
           <ul className='tier four'> 
            <li className='title'><h5><span>Pilots</span></h5></li> 
            <li>Environmental Defense Fund</li> 
            <li>Nature Conservancy</li> 
           </ul> 
          </section> 
         </div> 
         <div className={tierFed}> 
          <h3 onClick={this.handleFederalClick}><span>Federal & Regulated Policy</span></h3> 
          <ul className='tier three'> 
           <li onClick={this.handleGlriClick} className={glri}><h4><span>Great Lakes Restoration Initiative</span></h4></li> 
           <li onClick={this.handleAllianceClick} className={keyClick}>Alliance for the Great Lakes</li> 
           <li>Freshwater Future</li> 
           <li>Great Lakes & St. Lawrence Cities Init.</li> 
           <li>Great Lakes Commission</li> 
           <li>Healing Our Waters Coalition (NPCA, NWF)</li> 
          </ul> 
          <ul className='tier three'> 
           <li onClick={this.handleGlcClick} className={glc}><h4><span>Great Lakes Compact</span></h4></li> 
           <li onClick={this.handleAllianceClick} className={keyClick}>Alliance for the Great Lakes</li> 
           <li>NRDC</li> 
           <li onClick={this.handleNwfClick} className={keyClick}>NWF</li> 
           <li>State Advocates: <span className={keyClick}>OEC, MEC</span>, MEP, <span>Clean WI</span></li> 
          </ul> 
         </div> 
        </section> 
       </div> 
       <InfoSide aquaClass={aq} pollutedClass={pol} fedClass={fed} glriClass={glri} glcClass={glc} allianceClass={alliance} nwfClass={nwf} infoClass={glContentClick} /> 
      </div> 
     ); 
    } 
}) 

這裏是Infoside組件：

import React from 'react' 
import 'stylesheets/modules/infoside.scss' 

export default React.createClass({ 
    render:function(){ 
     return(
     <section id='info-side' className={'info-side '+this.props.infoClass}> 
      <div className='info-side-wrap'> 
      <p className={this.props.aquaClass}>Aquatic stuff here</p> 
      <p className={this.props.pollutedClass}>Polluted stuff here</p> 
      <p className={this.props.fedClass}>Federal stuff here</p> 
      <p className={this.props.glriClass}>GLRI stuff here</p> 
      <p className={this.props.glcClass}>GLC stuff here</p> 
      <p className={this.props.allianceClass}>Alliance stuff here</p> 
      <p className={this.props.nwfClass}>NWF stuff here</p> 
      </div> 
     </section> 
    ); 
    } 
}) 

Answer 1

在classnames

var classNames = require('classnames'); 

var Button = React.createClass({ 
    // ... 
    render() { 
    var btnClass = classNames({ 
     'btn': true, 
     'btn-pressed': this.state.isPressed, 
     'btn-over': !this.state.isPressed && this.state.isHovered 
    }); 
    return <button className={btnClass}>{this.props.label}</button>; 
    } 
});