React开发策略游戏时给SVG地图path组件添加属性及交互的方案咨询

你的需求完全可以实现，当前拆分Map和Territory组件的架构是合理的，只需要对现有代码做少量调整即可达到预期效果。

现有代码的问题说明 #

你当前代码中直接在SVG内嵌入<input>标签不会生效，因为SVG命名空间不支持原生HTML元素，需要用SVG内置的<foreignObject>标签包裹HTML内容后再放入SVG中。

核心实现要点 #

• 给path添加自定义属性：React 16+支持直接给DOM元素添加自定义属性，建议用标准的data-*格式存储自定义数据，比如data-troops={troops}，后续事件回调中可以通过e.currentTarget.dataset.troops直接读取，也可以直接绑定onClick等交互事件到path上。
• 兵力输入框定位：可以通过两种方式确定输入框位置：
  1. 提前在领地原始数据中标记每个领地的中心坐标centerX、centerY，性能最优
  2. 渲染时通过path元素的getBBox()方法动态计算边界框，再算出中心坐标，适合领地数据多不想手动标记的场景

修正后的代码示例 #

import { useState, useRef, useEffect } from 'react';

const Territory = ({ tD, initialTroops = 21, initialColor = 'red' }) => {
  const [color, setColor] = useState(initialColor);
  const [troops, setTroops] = useState(initialTroops);
  const pathRef = useRef(null);
  const [inputPos, setInputPos] = useState({ x: 0, y: 0 });

  // 动态计算领地中心坐标，定位输入框
  useEffect(() => {
    if (pathRef.current) {
      const bbox = pathRef.current.getBBox();
      setInputPos({
        x: bbox.x + bbox.width / 2 - 20, // 偏移值可根据输入框尺寸调整
        y: bbox.y + bbox.height / 2 - 15
      });
    }
  }, [tD]);

  // 示例：点击领地切换颜色
  const handleTerritoryClick = () => {
    setColor(prev => prev === 'red' ? 'blue' : 'red');
  };

  return (
    <>
      <path
        ref={pathRef}
        fillRule="evenodd"
        clipRule="evenodd"
        d={tD}
        fill={color}
        stroke="black"
        data-troops={troops} // 自定义兵力属性
        onClick={handleTerritoryClick} // 绑定点击事件
        style={{ cursor: 'pointer' }}
      />
      {/* 用foreignObject包裹HTML输入框 */}
      <foreignObject
        x={inputPos.x}
        y={inputPos.y}
        width={40}
        height={30}
        style={{ overflow: 'visible' }}
      >
        <input
          type="text"
          value={troops}
          onChange={(e) => setTroops(Number(e.target.value) || 0)}
          style={{
            width: '100%',
            textAlign: 'center',
            border: '1px solid #000',
            background: '#fff'
          }}
        />
      </foreignObject>
    </>
  );
};

export default Territory;

Map组件只需补充对应的领地数据即可：

const Map = () => {
  // 示例领地数据结构，可根据需求扩展字段
  const territories = [
    { id: 1, tD: 'M10 10h100v100H10z', initialTroops: 21, initialColor: 'red' },
    // 其余领地数据
  ];

  return (
    <svg width="1397" height="686" viewBox="0 0 1397 686" fill="none" xmlns="http://www.w3.org/2000/svg">
      {territories.map(territory => (
        <Territory
          key={territory.id}
          tD={territory.tD}
          initialTroops={territory.initialTroops}
          initialColor={territory.initialColor}
        />
      ))}
    </svg>
  );
};

export default Map;

优化建议 #

• 如果领地数量较多，建议提前在领地数据中预存中心坐标，省去每次渲染调用getBBox()的性能开销
• 如果兵力等数据需要全局共享，可将状态提到上层组件或者用状态管理库存储，Territory组件改为受控组件
• 可以给path添加hover、选中态的样式，提升交互体验

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