如何从反应中的标签获取特定属性（从生成的 html）

Question

这是我遇到的一个非常具体的问题，所以我希望有人可以帮助我。

我通过培根二维码生成器（Laravel）中的SVG方法生成二维码，它生成的内容大致如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 200 200">
<rect x="0" y="0" width="200" height="200" fill="#fefefe"/>
<g transform="scale(4.082)"><g transform="translate(4,4)">
    <path fill-rule="evenodd" d="DATA GOES HERE" fill="#000000" />
</g></g>

上面写着“DATA GOES HERE”的地方是构成二维码的生成数据。 我在我的 React 组件中调用了后端来生成它，然后我尝试将它放入一个状态，然后我将在我创建的块中显示该状态，但它只是将其呈现为纯文本。 经过一些测试，我发现我可以将数据添加到状态，然后在路径元素中实现它，如下所示：

<path fill-rule="evenodd" d={ this.state.qrCodeData } fill="#000000" />

但是，事实证明，仅获取这些数据很困难。 基本上我要问的是，有没有办法从 React 中的“path”元素中提取属性“d”，但从后端生成的上述 SVG 代码中提取出来？

先感谢您。

Answer 1

您可以使任一选项起作用。 要将 svg 呈现为 html 而不是纯文本，您将使用dangerouslySetInnerHTML 。 只有在您信任 SVG 时才应该这样做。 否则，要仅获取d ，您可以使用正则表达式。 这绝对是安全的，并且取决于您的数据是什么，它可以很好地工作。 如果您的 SVG 纯文本存储为svgString ，您可以执行以下操作： svgString[svgString.search(/g="[^"]*"/g)]; 。这有点令人讨厌，但至少不会打开您高达 XSS 攻击。