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;

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

2 个答案: