reactjs - 是否可以在 React.js 中从子组件中隐藏父组件？

Question

如流程图（流程图）所示，如果Main 组件呈现Login 组件，我想隐藏Header组件。但如果Main 组件呈现Home 组件，我想显示Header 组件。

这是 App.js 文件：

import React from 'react'
import Header from 'Header'
import Main from 'Main'
import Footer from 'Footer'

function App() {
  
  return (
    <div className="App">
      <Header />
      <Main />
      <Footer />
    </div>
  )
}

export default App;

这是 Main.js 文件：

import React from 'react'
import Home from './Home'
import Login from './Login'

function Main() {

  let user = true //Toggled by users

  return (
    
    <div>
      {
        user ? ( <Home /> ) : ( <Login /> )
      }
    </div>
  
  )
}

export default Main

将 Header 组件放在 Home 本身并不能解决问题，因为我必须添加更多页面并且在每个页面中添加 Header 组件似乎效率不高。

标签： reactjswebcomponentsparent-childparent

Answer 1

这是一个提升状态的用例，这里你的user状态应该在 and 的范围Header内Main。

然后只需通过 props 或 Context API将user(isLogged在示例中的) 传递给。Main

function Main({ isLogged, toggleLogin }) {
  return (
    <div>
      <button onClick={toggleLogin}>toggle</button>
      {isLogged ? <>Home</> : <>Login</>}
    </div>
  );
}

function App() {
  const [isLogged, toggle] = useReducer((p) => !p, false);
  return (
    <div className="App">
      {!isLogged && <>Header</>}
      <Main isLogged={isLogged} toggleLogin={toggle} />
      <>Footer</>
    </div>
  );
}