求助：React组件中用SVG实现带滚动条的动态索引表格问题

import { useState } from 'react';

const SVGTableWithScroll = () => {
  // 控制显示的条目数量，初始设为2
  const [displayCount, setDisplayCount] = useState(2);
  // 生成1-20的索引数组
  const indexes = Array.from({ length: 20 }, (_, i) => i + 1);

  // 处理计数器输入，限制范围在2-20之间
  const handleCountChange = (e) => {
    const num = parseInt(e.target.value, 10);
    if (!isNaN(num) && num >= 2 && num <= 20) {
      setDisplayCount(num);
    }
  };

  // 表格容器样式：宽度固定，高度由显示条目数决定（每行30px）
  const tableContainerStyle = {
    width: '200px',
    height: `${displayCount * 30}px`,
    overflowY: 'auto',
    border: '1px solid #ccc',
    padding: '8px',
    fontFamily: 'Arial, sans-serif'
  };

  // 索引行样式
  const indexRowStyle = {
    height: '30px',
    lineHeight: '30px',
    borderBottom: '1px solid #eee'
  };

  return (
    <div style={{ display: 'flex', gap: '20px', padding: '20px', alignItems: 'flex-start' }}>
      {/* Top表格 */}
      <svg width="220" height={`${displayCount * 30 + 16}`} viewBox={`0 0 220 ${displayCount * 30 + 16}`}>
        <foreignObject x="0" y="0" width="220" height={`${displayCount * 30 + 16}`}>
          <div style={tableContainerStyle}>
            {indexes.map(idx => (
              <div key={idx} style={indexRowStyle}>
                索引: {idx}
              </div>
            ))}
          </div>
        </foreignObject>
      </svg>

      {/* Bottom表格 */}
      <svg width="220" height={`${displayCount * 30 + 16}`} viewBox={`0 0 220 ${displayCount * 30 + 16}`}>
        <foreignObject x="0" y="0" width="220" height={`${displayCount * 30 + 16}`}>
          <div style={tableContainerStyle}>
            {indexes.map(idx => (
              <div key={idx} style={indexRowStyle}>
                索引: {idx}
              </div>
            ))}
          </div>
        </foreignObject>
      </svg>

      {/* 计数器控制区 */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <label>设置显示条目数 (2-20):</label>
        <input
          type="number"
          min="2"
          max="20"
          value={displayCount}
          onChange={handleCountChange}
          style={{ padding: '4px', width: '60px' }}
        />
      </div>
    </div>
  );
};

export default SVGTableWithScroll;

• 内部滚动条实现：利用SVG的<foreignObject>标签嵌入HTML容器，给容器设置overflowY: 'auto'，当索引列表高度超过容器时自动触发原生滚动条，比纯SVG模拟滚动条更简单可靠。
• 索引显示：通过Array.from生成1-20的索引数组，用map渲染每行索引，HTML文本比SVG的<text>标签更易维护。
• 计数更新逻辑：用React状态displayCount控制容器高度（每行固定30px，容器高度=显示数×30），同时限制计数器输入范围，状态更新后自动重渲染表格，实现动态调整显示数量。

• 如果必须纯SVG实现，可通过<clipPath>裁剪可视区域，结合onWheel事件手动调整索引列表的Y轴偏移模拟滚动，但需要自行绘制滚动条样式，复杂度更高，上述方案是性价比最优的实现方式。
• 可给索引行添加hover样式提升交互，也可将表格宽度、行高封装为props方便复用。

内容的提问来源于stack exchange，提问作者Moeen Trimzi.