如何使用功能组件在 ReactJS 中将 className 设置为 div答案

【问题标题】：How to set className to div in ReactJS using functional component如何使用功能组件在 ReactJS 中将 className 设置为 div
【发布时间】：2021-02-05 10:58:45
【问题描述】：

我有以下代码：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
    const [border, setBorder] = useState(false);
    return (
        <div className="App">
            <div className="SectionTitleItem">Claimers</div>
            <div className="SectionTitleItem">Resources</div>
        </div>
    );
}

CodeSandbox

如何仅为活动项设置border-bottom？

【问题讨论】：

看看react router
你如何定义哪个是活跃的？
如果项目被点击，那么它是活动的。有没有其他办法，我不想用react router

标签： reactjs

【解决方案1】：

App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [active, setActive] = useState(true);
  return (
    <div className="App">
      <div onClick={() => setActive(true)} className={`SectionTitleItem${active ? " active" : ""}`}>Claimers</div>
      <div onClick={() => setActive(false)} className={`SectionTitleItem${!active ? " active" : ""}`}>Resources</div>
    </div>
  );
}

styles.css

.App {
  font-size: 18px;
  margin: 40px 0 32px 0;
  display: flex;
}
.SectionTitleItem {
  margin-left: 50px;
}

.SectionTitleItem.active {
  border-bottom: 2px solid red;
}

【讨论】：

谢谢，但它只适用于第一项......当我点击第二项时，什么也没发生

【解决方案2】：

可能是这样的

export default function App() {
  const [active, setActive] = useState(null);

  const getItemClassName = (name) => {
    if (name === active) {
      return "SectionTitleItem active";
    }
    return "SectionTitleItem";
  };
  
  return (
    <div className="App">
      <div
        onClick={() => setActive("claimers")}
        className={getItemClassName("claimers")}
      >
        Claimers
      </div>
      <div
        onClick={() => setActive("resources")}
        className={getItemClassName("resources")}
      >
        Resources
      </div>
    </div>
  );
}

.App {
  font-size: 18px;
  margin: 40px 0 32px 0;
  display: flex;
}

.SectionTitleItem {
  margin-left: 50px;
}

.SectionTitleItem.active {
  border-bottom: 2px solid red;
}

【讨论】：