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

问题描述

如流程图 (Flowchart) 所示，如果 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 组件似乎效率不高。

解决方法

这是 lifting the state up 的一个用例，这里您的 user 状态应该在 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>
  );
}