渲染组件，在另一个遥远的组件渲染之后

Question

在导航菜单应用程序中，组件树下方有一个下拉菜单组件DropdownMenu2，带有菜单项，是<NavLinks>个组件。每次单击一个项目时，它都会指向 main App 中的 <Route> 之一。每个 <Route> 是一个页面，包含 Infofield 个组件。所以每次点击<NavLink>，都会渲染Infofield。

我的困惑是：我需要渲染 HeaderLogo 组件，每次渲染 Infofield（HeaderLogo 包含动画）。我在 Infofield 中构建 useEffect 挂钩时失败了。该钩子旨在包含自定义钩子，产生一个状态不断变化的变量。然后可以将该钩子提升到 App，从那里变量将传递到 HeaderLogo，内联到 key 属性。如果这个想法是正确的，那么我在 useEffect 中构建自定义挂钩时遇到了困难。也许（可能）有更好的方法...

应用程序最基本的结构如下所示：

应用程序

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HeaderLogo from "./components/HeaderLogo";
import NaviMain from "./components/NaviMain";
import Info from "./pages/Info";
/...
import { UserContext } from "./components/sub-components/UserContext";
   
function App() {
    
  return (
    <Router>
        <div className="App">
          
            <HeaderLogo />
            <NaviMain  />

          <Routes>
             <Route path="/Info" element={<Info />} />
             /...           
          </Routes>
          
        </div>
    </Router>
  );
}

export default App;

NaviMain

import "./NaviMain.css";
import NaviMainButton from "./NaviMainButton";
import NaviMainButtonDrop2 from "./NaviMainButtonDrop";

const NaviMain = () => {

  return (

        <nav>
            <ul>
                <NaviMainButtonDrop2 />
            </ul>
      </nav>  
  )
}
export default NaviMain

NaviMainButtonDrop2

import DropdownMenu2 from "./DropdownMenu2";

const NaviMainButtonDrop2 = () => {
  
  return (
    <li>
        <a>
           title
        </a>
        <DropdownMenu2 /> 
    </li>
  )
}
export default NaviMainButtonDrop2

下拉菜单2

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

const DropdownMenu2 = () => {
    
  return (
    <div className=dropdown-holder-us>
      {/* here menu unfolds */}
    {MenuItemContentSchool.map((item) => {
      return (
        <NavLink
            to={item.link} 
            className={(navData) => (navData.isActive ? "d-content-us active-style" : 'd-content-us')} 
            key={item.id} 
        >
          {item.title}
        </NavLink> 
      )
    })}
    </div>
  )
}
export default DropdownMenu2

信息（<Route>之一）

import InfoField from "../components/InfoField"


const Info = () => {
  return (
    <section className="intro-index">
      <InfoField text={"welcome"} />
    </section>
  )
}
export default Info

HeaderLogo

import "./HeaderLogo.css";

const HeaderLogo = () => {

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

Answer 1

这是全球国家的经典工作。您可以声明一个布尔状态，即 showHeader，并向标签添加条件渲染。每次单击下拉项时，全局状态变量 showHeader 都会发生变化，在 App 功能组件中，您应该监听此变量的变化。（例如，使用 Redux，您将在 App 中使用 useSelector(state=>state.showHeader)。

例如，这是 App 组件，其中 HeaderLogo 有条件渲染。为了使其可用，您需要构建一个 Redux 存储和 reducer 函数。 Read the official Redux docs for more

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { useSelector } from 'react-redux';
import HeaderLogo from "./components/HeaderLogo";
import NaviMain from "./components/NaviMain";
import Info from "./pages/Info";
/...
import { UserContext } from "./components/sub-components/UserContext";
   
function App() {
  const showHeader = useSelector(state=>state.showHeader)
  return (
    <Router>
        <div className="App">
          
            {showHeader ? <HeaderLogo /> : null}
            <NaviMain  />

          <Routes>
             <Route path="/Info" element={<Info />} />
             /...           
          </Routes>
          
        </div>
    </Router>
  );
}

export default App;
    </Router>

Answer 2

据我所知，您只是想在路径更改时“重新运行”HeaderLogo 组件中的动画。导入并使用 useLocation 挂钩，并使用 pathname 值作为 header 元素上的 React 键，并在其挂载时使用想要运行的动画。这里的想法是，当 React 键更改时，React 将重新挂载该元素。

示例：

import { useLocation } from "react-router-dom";
import "./HeaderLogo.css";

const HeaderLogo = () => {
  const { pathname } = useLocation();
  return (
    <header>
      <h1 key={pathname} className="head-main">
        learning curve
      </h1>
    </header>
  );
};

export default HeaderLogo;

渲染组件，在另一个遥远的组件渲染之后

rendering component, after another distant component renders

reactjs

react-router-dom

react-hooks