Bessere Methoden zum Bearbeiten von Klassennamen und Umgang mit Klicks in reactjs

Question

Neu zu React und JSX, und ich versuche, meinen Kopf, wie man Klassen eleganter oder effizienter manipulieren und Klickereignisse verwalten. Ich arbeite an zwei Komponenten (eine davon wird ziemlich groß) -Greatlakes & InfoSide. In der Greatlakes-Komponente versuche ich, einer Reihe verschiedener Elemente in einem Diagramm Klassen hinzuzufügen, die auf einigen davon basieren, auf die geklickt wurde. Ich habe hier eine funktionierende Komponente, aber sie ist mit Zustands-Booleschen Methoden aufgebläht und dann Klasse, die if/else-Anweisungen in render() festlegt.

Mein nächster Schritt ist, diese Greatlakes-Komponente in einige untergeordnete Komponenten auszubrechen und nach Möglichkeiten zu suchen, wie das Kind auf Ereignisse klicken kann, die sich auf den Zustand des Elternteils auswirken ... jede Anleitung wäre sehr hilfreich.

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

Und hier ist die Infoside Komponente:

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

Werfen Sie einen Blick auf 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>; 
    } 
});