Блог

Это довольно специфическая проблема, с которой я столкнулся, поэтому я надеюсь, что кто-нибудь сможет мне помочь.

Я генерирую QR-код с помощью метода SVG в Bacon QR Code generator (Laravel), и он генерирует что-то вроде этого:

 <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>
  

Там, где написано «ДАННЫЕ ИДУТ СЮДА», это сгенерированные данные, которые составляют QR-код. Я использовал вызов в своем компоненте React для серверной части, чтобы сгенерировать это, затем я попытался перевести его в состояние, которое затем отобразил бы в созданном мной блоке, но он просто буквально отображает это как обычный текст. После некоторого тестирования я увидел, что могу добавить данные в состояние, а затем реализовать их в элементе path следующим образом:

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

Однако получить только эти данные оказывается непросто. По сути, я спрашиваю, есть ли способ извлечь атрибут ‘d’ из элемента ‘path’ в React, но из приведенного выше SVG-кода, который генерируется из серверной части?

Заранее благодарю.

Вы можете заставить работать любой вариант. Чтобы отобразить svg в виде html, а не открытого текста, вы бы использовали dangerouslySetInnerHTML . Вы должны делать это только в том случае, если вы доверяете SVG. В противном случае, чтобы захватить только d , вы могли бы использовать регулярное выражение. Это определенно безопасно, и в зависимости от того, какие у вас данные, может работать отлично. Если ваш открытый текст SVG хранится как svgString , вы могли бы сделать что-то вроде: svgString[svgString.search(/g="[^"]*"/g)]; . Это немного неприятно, но, по крайней мере, не открывает вас для атак XSS.