ReactJS中跨组件控制组件显示/隐藏的实现求助

你的useVisibilityStatus自定义Hook存在严重问题——useEffect依赖isVisible，每次调用setIsVisible(!isVisible)都会触发useEffect重新执行，导致无限循环，完全不符合点击切换的需求。我们需要重构代码，实现按钮控制列表显示/隐藏的功能：

1. 重构自定义Hook #

修改useVisibilityStatus，让它负责维护状态并提供切换方法，去掉错误的useEffect逻辑：

import { useState } from "react";

function useVisibilityStatus(initialVisible = true) {
    const [isVisible, setIsVisible] = useState(initialVisible);

    // 定义切换状态的函数，使用函数式更新确保状态准确性
    const toggleVisibility = () => {
        setIsVisible(prevState => !prevState);
    };

    return { isVisible, toggleVisibility };
}

export default useVisibilityStatus;

2. 修改父组件传递切换方法 #

在ServiceContentView中获取状态和切换函数，并将切换函数通过props传递给SideNavView：

import ProductListView from "../common/ProductListView";
import SideNavView from "../common/SideNavView";
import SimpleMap from '../googlemap/SimpleMap';
import useVisibilityStatus from '../customhooks/useVisibilityStatus';

function ServiceContentView() {
    const { isVisible: listVisible, toggleVisibility } = useVisibilityStatus();

    return (
        <div className="row p-0 vw-100 service-view-body bg-primary position-relative">
            <div className="zindex-value position-absolute">
              <div className="service-view-sidenav float-end">
                {/* 把切换函数作为props传给SideNavView */}
                <SideNavView onToggleList={toggleVisibility} />
              </div>
            </div>
            {listVisible && <ProductListView />}
            <SimpleMap />
        </div>
    );
}

export default ServiceContentView;

3. 完善SideNavView组件 #

在SideNavView中接收父组件传递的切换函数，添加按钮并绑定点击事件：

// SideNavView.jsx
function SideNavView({ onToggleList }) {
    return (
        <div>
            {/* 保留你的侧边栏原有内容 */}
            <button onClick={onToggleList} className="your-button-class">
                {/* 可根据状态动态修改按钮文字，示例如下 */}
                {onToggleList ? "隐藏产品列表" : "显示产品列表"}
            </button>
        </div>
    );
}

export default SideNavView;

核心逻辑说明 #

• 重构后的Hook专注于状态管理，避免了原代码的无限循环问题
• 通过props实现跨组件的方法传递，让侧边栏的按钮能触发父组件的状态变更
• 状态变更后，React会自动重新渲染ProductListView的显示/隐藏状态

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