如何实现可扩展代码？支持动态增加diva并控制Maps组件单开

嘿，这个问题其实很好解决，核心思路就是组件复用+全局状态统一控制，这样以后加多少个Diva都不用重复写冗余代码，还能保证同一时刻只有一个Maps组件打开。我给你一步步拆解：

1. 先把单个Diva封装成可复用组件 #

把每个Diva的结构（按钮、Maps组件的显示逻辑）抽成独立组件，这样每个Diva的行为都是一致的，不用重复写相同的代码。

示例代码（React为例，其他框架思路类似）：

// 可复用的Diva组件
const Diva = ({ divaId, isMapActive, onToggleMap, mapProps }) => {
  return (
    <div className="diva-card">
      <h3>Diva {divaId}</h3>
      <button onClick={() => onToggleMap(divaId)}>
        {isMapActive ? '关闭地图' : '打开地图'}
      </button>
      {/* 只有当前Diva被激活时才渲染Maps */}
      {isMapActive && <Maps {...mapProps} />}
    </div>
  );
};

2. 在父组件统一管理全局状态 #

在所有Diva的父容器里，维护一个状态用来记录当前打开Maps的Diva ID。这样就能精准控制哪个Diva的Maps显示，其他的都隐藏。

父组件示例：

import { useState } from 'react';

const DivaContainer = () => {
  // 状态：当前激活地图的Diva ID，null表示没有任何地图打开
  const [activeDivaMapId, setActiveDivaMapId] = useState(null);

  // 切换地图的逻辑：点击按钮时，要么关闭当前地图，要么切换到目标Diva的地图
  const handleToggleMap = (divaId) => {
    setActiveDivaMapId(prevId => 
      prevId === divaId ? null : divaId
    );
  };

  // 这里存所有Diva的配置！新增Diva只需要往数组里加项就行
  const divaConfigs = [
    { id: 1, mapProps: { lat: 31.2304, lng: 121.4737 } }, // 比如上海坐标
    { id: 2, mapProps: { lat: 23.1291, lng: 113.2644 } }, // 广州坐标
    { id: 3, mapProps: { lat: 39.9042, lng: 116.4074 } }, // 北京坐标
    // 新增Diva？直接在这里加一行就行！
    { id: 4, mapProps: { lat: 22.5431, lng: 114.0579 } }  // 深圳坐标
  ];

  return (
    <div className="diva-list">
      {divaConfigs.map(diva => (
        <Diva
          key={diva.id}
          divaId={diva.id}
          isMapActive={activeDivaMapId === diva.id}
          onToggleMap={handleToggleMap}
          mapProps={diva.mapProps}
        />
      ))}
    </div>
  );
};

3. 扩展超简单！ #

以后要加第5、第6个甚至更多Diva，你只需要在divaConfigs数组里新增一个对象（包含唯一的id和对应Maps需要的mapProps），父组件会自动帮你渲染出对应的Diva，完全不用修改组件逻辑或按钮控制代码。

额外优化小技巧 #

• 如果你的Maps组件初始化比较重，可以考虑用懒加载或者条件渲染缓存来优化性能；
• 如果需要给每个Diva加不同的样式或内容，直接在divaConfigs里加对应的属性（比如name、className），然后在Diva组件里接收使用就行。

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