React：根據輸入欄位創建（svg使用）元素的數量-有解無憂

我從 React 開始并嘗試制作動態 svg：我想將輸入的數值“系結”到<use>畫布上顯示的圓圈數 ( )。但是，{message}狀態變數在回圈中不起作用for——我不知道如何創建/修改陣列。我怎樣才能{sampleCircles}動態渲染？提前致謝。

import { useState } from "react";

export default function Svg() {
  const [message, setMessage] = useState(0);
  let sampleCircleCopies = [
    <use href="#originalCircle" x="15" y="15" key="1" />,
    <use href="#originalCircle" x="30" y="30" key="2" />
  ];

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

  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}
        />
        <h2>Number of cloned circles: {message}</h2>

      </div>
    </>
  );
}

uj5u.com熱心網友回復：

您可以使用map()創建一個 JSX 元素陣列，這些元素會為您呈現 react。我也會使用valueAsNumber而不是value. map()當然你也可以直接在 JSX 中嵌入。

function Svg() {
  const [message, setMessage] = React.useState(0);
  const sampleCircleCopies = [...new Array(message)].map((_, i) => (
    <use href="#originalCircle" x={Math.floor(200 * Math.random())} y={Math.floor(50 * Math.random())} key={i} />
  ));
  const handleChange = (event) => {
    setMessage(event.target.valueAsNumber);
  };

  return (
    <React.Fragment>
      <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={e => handleChange(e)}
          value={message}
        />
        <h2>Number of cloned circles: {sampleCircleCopies.length}</h2>
      </div>
    </React.Fragment>
  );
}

ReactDOM.render(<Svg/>, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

我已經稍微更改了代碼以在每次計數增加時生成隨機圓圈，以表明代碼正在運行并且您正在獲得所需的任意數量的圓圈。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/520549.html

標籤：反应svg

上一篇：無法使用HttpContext.SignInAsync登錄

下一篇：CSS屬性被覆寫