您的位置:我也知道>地区>经济>经济>

Question

我有这个导航条组件，它包含一个“黑暗模式”图标，它执行一个"useState“函数，将图标从光更改为暗，添加一个”活动“类，我想将相同的值带到"App"中的初始组件中，以便向布局类添加一个”黑暗“<代码>E 211。

export default function Navbar() {
    const [darkModeToggle, setDarkModeToggle] = useState(false);
    return (
        <>
            <header className='header'>
                <div className='header__container'>
                    <div
                        className={
                            darkModeToggle
                                ? 'header__container__darkmode active'
                                : 'header__container__darkmode'
                        }
                        onClick={() => {
                            setDarkModeToggle(!darkModeToggle);
                        }}
                    >
                        <BiSun className='sun' />
                        <BiMoon className='moon' />
                    </div>
                </div>
            </header>
        </>
    );
}

export default function App() {
    return (
        <div className='layout'>
            <Navbar />
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/about' element={<About />} />
                <Route path='/services' element={<Services />} />
                <Route path='/contact' element={<Contact />} />
                <Route path='*' element={<NotFound />} />
            </Routes>
        </div>
    );
}

Answer 1

将状态放入父组件(在本例中为App )，并通过Navbar传递支持

export default function App() {
 const [darkModeToggle, setDarkModeToggle] = useState(false);
    return (
        <div className='layout'>
            <Navbar darkModeToggle={darkModeToggle} setDarkModeToggle={setDarkModeToggle}/>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/about' element={<About />} />
                <Route path='/services' element={<Services />} />
                <Route path='/contact' element={<Contact />} />
                <Route path='*' element={<NotFound />} />
            </Routes>
        </div>
    );
}

在纳瓦尔巴

function Navbar({darkModeToggle, setDarkModeToggle}) {
  return (
    <>
      <header className="header">
        <div className="header__container">
          <div
            className={
              darkModeToggle
                ? "header__container__darkmode active"
                : "header__container__darkmode"
            }
            onClick={() => {
              setDarkModeToggle(!darkModeToggle);
            }}
          >
            <BiSun className="sun" />
            <BiMoon className="moon" />
          </div>
        </div>
      </header>
    </>
  );
}