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

Posted 2023-02-23

【中文标题】是否可以在 React.js 中从子组件中隐藏父组件？

【英文标题】：Is it possible to hide a parent component from child component in React.js?

【发布时间】：2021-04-26 22:10:25

【问题描述】：

如流程图 (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 组件似乎效率不高。

【问题讨论】：

How to create a Minimal, Reproducible Example

请看一下

【参考方案1】：

这是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>
  );