如何以编程方式将 SVG 形状添加到 React 组件中的 SVG 图形？

Question

如何以编程方式创建在 React 组件中呈现的 SVG 形状？ 在本例中，我创建了一个包含 20 个点的字符串。 但是，在标签<svg>和</svg>之间放置{dots}是行不通的。 只需将{dots}放入组件的返回 function 就会将其显示为字符串。

我究竟做错了什么？ 任何帮助和建议都非常感谢！！！

import './SVGLayer.css';
import React from 'react';

const SVGLayer = () => {
  let dots: string = '';

  for (let i = 0; i < 20; i++) {
    dots += `<circle cx="${100 + i * 10}px" cy="100px" r="0.5px" stroke="black" />`;
  }

  return (
    <div className="svg-layer">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        width="800px"
        height="600px"
      >
        <circle cx="100px" cy="100px" r="1px" stroke="black" />
        {dots}
      </svg>
    </div>
  );
};

export default SVGLayer;

Answer 1

您不想使用模板文字，因为模板文字是字符串。 React 看到你的{dots}并认为，“好的，bassman21 正在尝试在这里渲染一个字符串。”

如果 React 看到 JSX（不要担心你的 for 循环，你可以将map() function 放入 JSX），它实际上会创建你想要的组件（它的引擎会用调用React.createComponent()替换 JSX 元素），那么为什么不尝试类似的东西：

return (
    <div className="svg-layer">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        width="800px"
        height="600px"
      >
        <circle cx="100px" cy="100px" r="1px" stroke="black" />
        {/* There are much better ways to do this, but this should illustrate my point nicely */}
        {[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19].map((offset, idx) => <circle key={`circle-${idx}`} cx={`${100 + offset * 10}px`} cy="100px" r="0.5px" stroke="black" />}
      </svg>
    </div>
  );

这将渲染 20 个实际元素，并将您的数据插入到 cx 道具中！