Reactjs 使用React的内联SVG（不带JSX）

我试图显示一个内嵌式HTML SVG，如下所示：

<a target="blank_" href="https://www.linkedin.com/">
  <svg class="svg" viewBox="0 0 24 24">
    <path d="M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z" />
  </svg>
</a>

---

但是我很难让svg显示出来。关于显示内联svg的任何提示？

您的脚本中有一些输入错误。我已经在下面把它们修好了。请随意做一个比较

let path=React.createElement（'path'，{d:"1，1，3，5，2，2，3，3，2，3，2，2，3，2，3，2，3，2，3，2，3，3，2，3，3，3，3，2，2，2，3，3，2，2，2，3，3，3，2，2，1，1，1，1，1，1，1，1，1，1，19，1，1，1，1，1，1，3，3，5，5，5，5，5，5，5，5，5，5，5，5，5，5，5，5，5，5，5，5，5，5，5，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，3，2，3，3，3，3，3，3，3，3，3，3，3，3，3，3，3，3 6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0,0 5.19,6.88C5.19，7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z“}，空）；
让svg=React.createElement（'svg'，{className:'svg'，viewBox:'0024'，path）；
让link=React.createElement（'a'，{target:“\u blank”，href:”https://www.linkedin.com/“}，svg）；
ReactDOM.render（link，document.getElementById（“app”）；

我曾在几个不同的场合尝试过，但都没有成功（我想我是误解了什么）-非常感谢！而且，您完全不需要使用

createElement

就可以完成同样的事情。JSX支持SVG元素，与HTML相同。您可能需要对某些属性（例如填充规则等）进行分类，但除此之外，基本上可以从HTML文件复制/粘贴。

let path = React.createElement('path', {d: "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z", null);
let svg = React.createElement('svg', {className: "svg" viewBox: "0 0 24 24"}, path);
let link = React.createElement('a', {target: "blank_", href="https://www.linkedin.com/"}, svg);