React中父组件传态控制多子popover，如何实现独立切换？

问题核心在于你用单个布尔值管理所有Popover的状态，所有Marker组件共享同一个isPopoverOpen变量，导致切换时所有弹窗同步变化。要让每个Popover拥有独立状态，需要用对象或数组存储每个弹窗的状态，给每个弹窗分配唯一标识来区分。

方案1：固定数量的Popover（手动指定标识） #

用对象存储每个弹窗的状态，每个弹窗对应一个自定义key，切换时只更新对应key的状态：

父组件代码 #

import { useState } from 'react';
import Marker from './Marker';

export default function App() {
  // 用对象存储每个Popover的独立状态
  const [popoverStates, setPopoverStates] = useState({
    popover1: false,
    popover2: false,
    popover3: false
  });

  // 通用切换函数，接收弹窗标识key
  const togglePopover = (key) => {
    setPopoverStates(prevState => ({
      ...prevState,
      [key]: !prevState[key]
    }));
  };

  return (
    <>
      <Marker 
        isPopoverOpen={popoverStates.popover1} 
        setIsPopoverOpen={() => togglePopover('popover1')} 
      />
      <Marker 
        isPopoverOpen={popoverStates.popover2} 
        setIsPopoverOpen={() => togglePopover('popover2')} 
      />
      <Marker 
        isPopoverOpen={popoverStates.popover3} 
        setIsPopoverOpen={() => togglePopover('popover3')} 
      />
    </>
  );
};

方案2：动态渲染的Popover（基于数据列表） #

如果Popover是从动态数据列表生成的，用每个数据项的唯一ID作为标识，确保状态和弹窗一一对应：

父组件代码 #

import { useState } from 'react';
import Marker from './Marker';

export default function App() {
  // 示例动态数据，每个项必须有唯一id
  const markerList = [
    { id: 'marker-001', label: '地点A' },
    { id: 'marker-002', label: '地点B' },
    { id: 'marker-003', label: '地点C' }
  ];

  // 初始化状态：遍历数据生成每个弹窗的初始关闭状态
  const initialPopoverStates = markerList.reduce((acc, marker) => {
    acc[marker.id] = false;
    return acc;
  }, {});
  const [popoverStates, setPopoverStates] = useState(initialPopoverStates);

  const togglePopover = (markerId) => {
    setPopoverStates(prevState => ({
      ...prevState,
      [markerId]: !prevState[markerId]
    }));
  };

  return (
    <>
      {markerList.map(marker => (
        <Marker 
          key={marker.id}
          isPopoverOpen={popoverStates[marker.id]} 
          setIsPopoverOpen={() => togglePopover(marker.id)} 
        />
      ))}
    </>
  );
};

原理说明 #

通过对象存储每个弹窗的独立状态，每个Marker组件只会读取和修改自己对应的状态字段，避免了所有弹窗共享单个布尔值的问题。这样点击任意弹窗的按钮时，只会切换当前弹窗的显示状态，其他弹窗不受影响。

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