React Hooks - 更改父样式以反映子项 onClick

Question

我对 React 很陌生，我正试图绕过钩子。我有一个按钮组件，单击时已成功更改样式，但理想情况下，我希望该组件(应用程序(的父组件能够接受更改，以便我也可以向其添加样式类。

这是我到目前为止所拥有的简化版本：

父母：

function App() {
return (
<BrowserRouter>
<Main className={navOpen ? 'active': ''}> // <---this is what I'm trying to update
<header className="Nav">
<NavBurger />
<Nav>
<NavLink exact to="/">Home</NavLink>
</Nav>
</header>
<div className="content">
<Route exact path="/" component={Home} />
</div>
</Main>
</BrowserRouter>
);
}
export default App;

下面是子组件：

function NavBurger() {
const openMenu = () => setIsOpen(!isOpen);
const [isOpen, setIsOpen] = useState(false);
return (
<NavButton className={isOpen ? 'active': ''} onClick={openMenu}> // <-- This works just fine
<span></span>
<span></span>
<span></span>
</NavButton>
);
}
export default NavBurger;

这可能吗？我一直在尝试一些事情，但仍然无法让它工作。

Answer 1

您应该重新考虑isOpen范围，对于此示例，您可能希望它可用于App，因此您应该提升状态。

通常，多个组件需要反映相同的变化数据。我们建议将共享状态提升到其最接近的共同祖先。

function App() {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(open => !open);
return (
<BrowserRouter>
<Main className={navOpen ? 'active' : ''}>
<header className="Nav">
<NavBurger isOpen={isOpen} toggle={toggle}/>
</header>
</Main>
</BrowserRouter>
);
}
function NavBurger({ isOpen, toggle }) {
return (
<NavButton className={isOpen ? 'active' : ''} onClick={toggle}>
<span></span>
<span></span>
<span></span>
</NavButton>
);
}

请注意，这个问题与钩子无关，更多关于状态和生命周期。