Javascript 如何设置链接父级<；李>；积极参与反应？

在jQuery中，单击链接时，我可以使用以下命令将li设置为活动：

<script>
$({
    $('.nav-link li a').click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
});
</script>
<ul class="nav-link">
<li class="active"><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
</ul>

$({
$（'.nav link li a'）。单击（函数（）{
$（this）.parent（）.addClass（'active'）.sides（）.removeClass（'active'）；
});

不过，我该如何处理这件事呢

handleClick(e) {
    e.preventDefault();
    //???
}

render() {
    <ul class="nav-link">
    <li class="active"><a href="#" onClick={handleClick}>First Link</a></li>
    <li><a href="#" onClick={handleClick}>Second Link</a></li>
    <li><a href="#" onClick={handleClick}>Third Link</a></li>
    </ul>
}

handleClick（e）{
e、 预防默认值（）；
//???
}
render（）{





}

类似这样的内容：

styles.css

.active {
  color: red;
}

.inactive {
  color: blue;
}

App.js

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

export default function App() {
  const [links, setLinks] = useState([
    {
      url: "#",
      title: "First Link",
      class: "active"
    },
    {
      url: "#",
      title: "Second Link",
      class: "active"
    },
    {
      url: "#",
      title: "Third Link",
      class: "active"
    }
  ]);

  const handleClick = index => {
    links[index].class = "inactive";
    setLinks([...links]);
  };

  return (
    <ul className="nav-link">
      {links.map((link, index) => {
        return (
          <li className={link.class} key={index}>
            <a href={link.url} onClick={() => handleClick(index)}>
              {link.title}
            </a>
          </li>
        );
      })}
    </ul>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[links，setLinks]=useState([
{
网址：“#”，
标题：“第一链接”，
班级：“活跃”
},
{
网址：“#”，
标题：“第二链接”，
班级：“活跃”
},
{
网址：“#”，
标题：“第三链接”，
班级：“活跃”
}
]);
const handleClick=索引=>{
链接[index].class=“非活动”；
设置链接（[…链接]）；
};
返回(

{links.map（（链接，索引）=>{
返回(


);
})}

);
}

类似这样的内容：

styles.css

.active {
  color: red;
}

.inactive {
  color: blue;
}

App.js

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

export default function App() {
  const [links, setLinks] = useState([
    {
      url: "#",
      title: "First Link",
      class: "active"
    },
    {
      url: "#",
      title: "Second Link",
      class: "active"
    },
    {
      url: "#",
      title: "Third Link",
      class: "active"
    }
  ]);

  const handleClick = index => {
    links[index].class = "inactive";
    setLinks([...links]);
  };

  return (
    <ul className="nav-link">
      {links.map((link, index) => {
        return (
          <li className={link.class} key={index}>
            <a href={link.url} onClick={() => handleClick(index)}>
              {link.title}
            </a>
          </li>
        );
      })}
    </ul>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[links，setLinks]=useState([
{
网址：“#”，
标题：“第一链接”，
班级：“活跃”
},
{
网址：“#”，
标题：“第二链接”，
班级：“活跃”
},
{
网址：“#”，
标题：“第三链接”，
班级：“活跃”
}
]);
const handleClick=索引=>{
链接[index].class=“非活动”；
设置链接（[…链接]）；
};
返回(

{links.map（（链接，索引）=>{
返回(


);
})}

);
}

将状态保留在父组件中并将处理程序作为道具向下传递。请参阅将状态保留在父组件中并将处理程序作为道具向下传递。请参阅