使用Styled Components通过onClick切换另一组件的display:none/block状态

核心逻辑是通过状态驱动视图的原则，将控制显隐的状态存放在两个组件的公共父节点，或者通过上下文共享状态，避免直接操作DOM。

方案1：状态提升（最简单，适用于组件层级相近的场景） #

1. 在公共父组件中定义显隐状态和切换方法：

import { useState } from 'react';

function App() {
  // 初始值为true代表默认显示，false代表默认隐藏
  const [isTargetShow, setIsTargetShow] = useState(true);
  // 切换显隐的方法
  const toggleDisplay = () => setIsTargetShow(prev => !prev);

  return (
    <div>
      {/* 点击触发组件，传入切换方法 */}
      <TriggerBtn toggle={toggleDisplay} />
      {/* 目标控制组件，传入显隐状态 */}
      <TargetBox isShow={isTargetShow} />
    </div>
  )
}

2. 点击触发组件接收方法绑定到onClick：

function TriggerBtn({ toggle }) {
  return <button onClick={toggle}>点击切换目标组件显隐</button>
}

3. 目标组件接收状态动态控制display属性：

function TargetBox({ isShow }) {
  return (
    <div style={{ display: isShow ? 'block' : 'none' }}>
      我是被控制的目标组件内容
    </div>
  )
}

方案2：Context上下文（适用于组件层级差大，不想逐层传参的场景） #

1. 先创建上下文和自定义Hook：

import { createContext, useContext, useState } from 'react';

const DisplayCtx = createContext();

// 上下文提供者，包裹需要共享状态的组件范围
export function DisplayProvider({ children }) {
  const [isTargetShow, setIsTargetShow] = useState(true);
  const toggleDisplay = () => setIsTargetShow(prev => !prev);

  return (
    <DisplayCtx.Provider value={{ isTargetShow, toggleDisplay }}>
      {children}
    </DisplayCtx.Provider>
  )
}

// 封装自定义Hook，方便组件直接调用上下文
export function useDisplayCtrl() {
  return useContext(DisplayCtx);
}

2. 在根组件包裹提供者：

function App() {
  return (
    <DisplayProvider>
      {/* 所有需要用到显隐控制的组件都放在Provider内部 */}
      <TriggerBtn />
      <div>
        <div>
          <TargetBox />
        </div>
      </div>
    </DisplayProvider>
  )
}

3. 触发组件直接调用切换方法：

function TriggerBtn() {
  const { toggleDisplay } = useDisplayCtrl();
  return <button onClick={toggleDisplay}>点击切换显隐</button>
}

4. 目标组件接收状态控制display：

function TargetBox() {
  const { isTargetShow } = useDisplayCtrl();
  return (
    <div style={{ display: isTargetShow ? 'block' : 'none' }}>
      我是被控制的目标组件内容
    </div>
  )
}

注意事项 #

• 不要直接通过原生document.querySelector等API获取DOM修改display属性，React的状态更新触发重渲染后，手动修改的DOM属性会被重置。
• 如果是跨路由、跨全局的组件控制，可以用轻量全局状态库（比如Zustand）替代Context，写法更简洁。

内容的提问来源于stack exchange，提问作者Georgi