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

Question

我是 React 的新手，我正在尝试解决问题。我有一个按钮组件，我已成功更改了单击时的样式，但理想情况下我希望该组件（应用程序）的父级接受更改，以便我也可以向其添加样式 class。

这是我目前拥有的简化版本：

家长：

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 可用，因此您应该 Lift the State up.

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor.

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>
  );
}

Note that this question has nothing to do with hooks and more about State and Lifecycle.

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

React Hooks - change parent style to reflect child onClick

javascript

reactjs

react-props

react-hooks