重新渲染组件，单击不同组件中的事件之后

Question

在我的应用程序中，我有一个HeaderLogo组件，<h1>包含动画(在其head-main类中(。我想在<NavLink>中的onclick事件之后重新渲染此组件以触发动画。

<NavLink>位于DropdownMenu中，该菜单位于MainNavi内。

页眉徽标

const HeaderLogo = () => {
return (
<header>
<h1 className="head-main">learning curve</h1>
</header>
)
}
export default HeaderLogo

下拉菜单

import { MenuItemContentSchool } from "./sub-components/MenuItemContentSchool"
import { useState } from "react";
import { NavLink } from "react-router-dom";

const DropdownMenu2 = () => {
const [click, setClick] = useState("");
const handleClick = () => {
setClick("hide-menu");
}

return (
<div className={`dropdown-holder-us ${click}`}>
{MenuItemContentSchool.map((item) => {
return (
<NavLink
to={item.link} 
className='d-content-us'
onClick={handleClick}  
key={item.title} 
>
{item.title}
</NavLink>
)
} )}
</div>
)
}
export default DropdownMenu2

应用程序

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HeaderLogo from "./components/HeaderLogo";
import NaviMain from "./components/NaviMain";    
function App() {

return (
<Router>
<div className="App">
<HeaderLogo />
<NaviMain  />
<Routes>
//...
</Routes>

</div>
</Router>
);
}
export default App;

NaviMain

import DropdownMenu2 from "./DropdownMenu2";
const NaviMain = () => {

return (
<nav>
<ul className="nav-main">  
<li className="nav-main__button">
<a>school</a>
<DropdownMenu2 /> 
</li>           
</ul>    
</nav>
)
}
export default NaviMain

Answer 1

我不知道这是否有效，但你可以尝试以下解决方案：

设置id:

<h1 id="testing" className="head-main">learning curve</h1>

更改

const handleClick = () => {
setClick("hide-menu");
}

至

const handleClick = () => {
setClick("hide-menu");
let element = document.getElementById('#testing').
element.classList.remove("head-main");
element.classList.add("head-main");
}

请让我知道这个解决方案是否有效。