React：根据输入值动态生成指定数量的<svg use>元素

首先要明确核心问题：你当前的sampleCircleCopies是固定数组，没有和message状态关联，所以输入框数值变化时不会更新渲染的圆形数量。另外输入框的value默认是字符串类型，直接用于循环会出现异常，需要先转成数字。

1. 修正状态更新逻辑 #

把输入框的字符串值转为数字，同时处理非数字输入的情况：

const handleChange = (event) => {
  // 转成数字，若输入非数字则设为0
  setMessage(Number(event.target.value) || 0);
};

2. 动态生成圆形副本数组 #

不要用固定数组，而是根据message的数值动态生成<use>元素。可以用Array.from快速创建对应长度的数组，再映射为需要的元素：

// 根据message数量生成圆形副本
const sampleCircleCopies = Array.from({ length: message }, (_, index) => (
  <use 
    href="#originalCircle" 
    x={15 * (index + 1)} 
    y={15 * (index + 1)} 
    key={index} 
  />
));

这里通过index计算每个圆形的位置，确保它们错开排列；key用index即可（简单列表场景下无需额外唯一ID）。

完整修改代码 #

import { useState } from "react";

export default function Svg() {
  const [message, setMessage] = useState(0);

  // 动态生成对应数量的圆形副本
  const sampleCircleCopies = Array.from({ length: message }, (_, index) => (
    <use 
      href="#originalCircle" 
      x={15 * (index + 1)} 
      y={15 * (index + 1)} 
      key={index} 
    />
  ));

  const handleChange = (event) => {
    setMessage(Number(event.target.value) || 0);
  };

  return (
    <>
      <svg className="p-0 border-2 mx-auto" width="400" height="400">
        <circle
          cx="50%"
          cy="50%"
          r="10"
          id="originalCircle"
          style={{ fill: "orange" }}
        />

        {sampleCircleCopies}
      </svg>

      <div>
        <input
          type="number"
          className="border-2 mt-2 p-1 rounded-xl"
          onChange={handleChange}
          value={message}
          min="0" // 限制输入最小值为0
        />
        <h2>Number of cloned circles: {message}</h2>
      </div>
    </>
  );
}

补充说明 #

• 原来的固定数组不会随message变化重新生成，现在改为每次组件渲染（状态更新时）都动态计算数组，就能实现数量绑定。
• 给输入框加min="0"可以避免输入负数，更符合需求。
• 如果需要调整圆形排列方式，修改x和y的计算逻辑即可，比如改成随机位置、网格排列等。

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