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

Posted 2023-02-21

【中文标题】如何使用功能组件在 ReactJS 中将 className 设置为 div

【英文标题】：How to set className to div in ReactJS using functional component

【发布时间】：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

【参考方案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;