React组件间共享状态：点击组件1按钮控制组件2类名切换

核心问题分析 #

1. 状态类型不一致：初始open是布尔值false，但点击后被设置为字符串'hidden'/'block'，导致后续类名渲染和状态判断逻辑混乱。
2. 触发逻辑颠倒：需求是点击组件1（SideNav）的按钮控制组件2（Nav）的类，但当前按钮在组件2（Nav）中，触发源错误。
3. 类名绑定方式错误：直接将状态值作为类名，未根据布尔状态动态切换目标类。

修正后的代码实现 #

1. ContextProvider（保持状态为布尔值）

import React, { useState } from 'react';

export const Context = React.createContext();
export const ContextProvider = ({ children }) => {
  // 保持open为布尔值，true对应显示（block），false对应隐藏（hidden）
  const [open, setOpen] = useState(false);

  return (
    <Context.Provider value={{ open, setOpen }}>{children}</Context.Provider>
  );
};

2. 组件1（SideNav：添加按钮，负责触发状态切换）

import React, { useContext } from 'react';
import { Context } from '../context/Context';

export default function SideNav({ surahs }) {
  const { setOpen } = useContext(Context);

  // 点击按钮切换open状态
  const toggleNavClass = () => {
    setOpen(prev => !prev);
  };

  return (
    <div className="bg-red">
      {/* 这里是控制组件2的按钮 */}
      <button onClick={toggleNavClass}>切换Nav的显示状态</button>
    </div>
  );
}

3. 组件2（Nav：根据open状态动态绑定类名）

import React, { useContext } from 'react';
import { Context } from '../context/Context';

export default function Nav() {
  const { open } = useContext(Context);

  // 根据open状态决定类名：open为true时用block，false时用hidden
  return (
    <div className={`${open ? 'block' : 'hidden'}`}>
      {/* Nav的内容 */}
    </div>
  );
}

关键说明 #

• 状态一致性：始终用布尔值维护open状态，避免类型切换带来的逻辑错误。
• 触发源正确：将控制按钮放在组件1（SideNav）中，符合需求的触发逻辑。
• 动态类名：通过三元表达式根据open的值动态选择block或hidden类，实现显示/隐藏的切换。

内容的提问来源于stack exchange，提问作者Said Al-Ghiyats