根据 DOM 值和状态比较切换类名

Question

我正在使用 React 开发一个个人投资组合，它从 json 获取数据并呈现它。项目组成部分是我遇到一些困难的地方。我在类别下渲染项目，但我的问题是我创建了一个切换滑块选择器，我可以在其中选择一个类别，但我不知道如何根据当前状态更改滑块选项的类名。

代码如下：

import React, { Component } from 'react';
import SectionWrap from './sectionWrap'; 

class Projects extends Component { 
  state = {
    switchState: "All"
  }

  // renderProjects function is just rendering jsx based on imported json file (nothing important)

  switchCurrentState = (e) => {
    e.preventDefault();
    this.setState({
      switchState: e.target.innerHTML
    })
  }
  render() {
    return (
      <SectionWrap id="projects" name="Projects">
        <div className="switchWrap">
          <a className="switch" href="#" onClick={this.switchCurrentState}>All</a>
          <a className="switch" href="#" onClick={this.switchCurrentState}>Graphic</a>
          <a className="switch" href="#" onClick={this.switchCurrentState}>Web</a>
          <a className="switch" href="#" onClick={this.switchCurrentState}>Photography</a>
          <a className="switch switchOn" href="#" onClick={this.switchCurrentState}>Video</a>
        </div>
        <div className="projectsWrap">
          {this.state.switchState == "All" ? this.renderProjects("All") : this.renderProjects(this.state.switchState)}
        </div>
      </SectionWrap>
    );
  }
}

export default Projects;

我想要做的是在开关处于活动状态时添加一个类名“switchOn”，例如：

className={`switch ${this.state.switchState === this.value ? 'switchOn' : ''}`

this.value 是 div 的值/文本。

Answer 1

您似乎已经回答了自己的问题，但不要使用 this.value 或在每个类名中放入那么大的条件，而是编写一个辅助函数：

activeClassname(matchText) {
  if(this.state.switchState === matchText) {
    return 'switchOn';
  }
  return '';
}

然后在您的链接中：

<a className={`switch ${activeClassname('All')}`} href="#" onClick={this.switchCurrentState}>All</a>
<a className={`switch ${activeClassname('Graphic')}`} href="#" onClick={this.switchCurrentState}>Graphic</a>
<a className={`switch ${activeClassname('Web')}`} href="#" onClick={this.switchCurrentState}>Web</a>
<a className={`switch ${activeClassname('Photography')}`} href="#" onClick={this.switchCurrentState}>Photography</a>
<a className={`switch ${activeClassname('Video')}`} href="#" onClick={this.switchCurrentState}>Video</a>

Answer 2

你可以这样做：

import React, { Component } from 'react';
import SectionWrap from './sectionWrap'; 

const switches = ["All", "Web", "Graphic", "Photography", "Video"];

class Projects extends Component { 
  state = {
    switchState: "All"
  }

  // renderProjects function is just rendering jsx based on imported json file (nothing important)

  switchCurrentState = (e) => {
    e.preventDefault();
    this.setState({
      switchState: e.target.innerHTML
    })
  }
  render() {
    return (
      <SectionWrap id="projects" name="Projects">
        <div className="switchWrap">
          { switches.map(switch => 
            (<a 
               className=`switch ${this.state.switchState === switch : "switchOn" : ""}`
               href="#" 
               onClick={this.switchCurrentState}
             >
                 { switch }
             </a>)
            )
          }
        </div>
        <div className="projectsWrap">
          {this.renderProjects(this.state.switchState)}
        </div>
      </SectionWrap>
    );
  }
}

export default Projects;