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

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

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？

解决方法

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

也许类似

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