MDN sagt, dass dies zugunsten von xlink:href
veraltet isthref
. Sie sollten das href
Attribut direkt verwenden können. Das folgende Beispiel enthält beide Versionen.
Ab 0,14 Reagieren , xlink:href
ist über Reagieren als Eigentum zur Verfügung xlinkHref
. Es wird als eine der "bemerkenswerten Verbesserungen" in den Versionshinweisen für 0.14 erwähnt.
<!-- REACT JSX: -->
<svg>
<use xlinkHref='/svg/svg-sprite#my-icon' />
</svg>
<!-- RENDERS AS: -->
<svg>
<use xlink:href="/svg/svg-sprite#my-icon"></use>
</svg>
Update 2018-06-09: Informationen zu href
vs- xlink:href
Attributen hinzugefügt und Beispiel aktualisiert, um beide einzuschließen . Danke @devuxer
Update 3 : Zum Zeitpunkt des Schreibens finden Sie hier die SVG-Eigenschaften von React Master .
Update 2 : Es scheint, dass alle SVG-Attribute jetzt über "Reagieren" verfügbar sein sollten (siehe Zusammengeführtes SVG-Attribut PR ).
Update 1 : Möglicherweise möchten Sie das svg-bezogene Problem auf GitHub im Auge behalten, um zusätzliche SVG-Unterstützung zu erhalten. Es gibt Entwicklungen in den Arbeiten.
Demo:
const svgReactElement = (
<svg
viewBox="0 0 1340 667"
width="100"
height="100"
>
<image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
{ /* Deprecated xlink:href usage */ }
<image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/>
</svg>
);
var resultHtml = ReactDOMServer.renderToStaticMarkup(svgReactElement);
document.getElementById('render-result-html').innerHTML = escapeHtml(resultHtml);
ReactDOM.render(svgReactElement, document.getElementById('render-result') );
function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom-server.browser.development.js"></script>
<h2>Render result of rendering:</h2>
<pre><svg
viewBox="0 0 1340 667"
width="100"
height="100"
>
<image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
{ /* Deprecated xlink:href usage */ }
<image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/>
</svg></pre>
<h2><code>ReactDOMServer.renderToStaticMarkup()</code> output:</h2>
<pre id="render-result-html"></pre>
<h2><code>ReactDOM.render()</code> output:</h2>
<div id="render-result"></div>
<use xlinkHref="/svg/svg-sprite#my-icon" />
.xlink:href
ist veraltet, soll jetzt nur verwendenhref
- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:hrefxlink:href
also müssen wir es noch verwenden. Tatsächliche Webanwendungen müssen entweder den gemeinsamen Nenner der Browserfunktionen verwenden oder bestimmte Problemumgehungen / Polyfills implementieren.Property 'xlink' does not exist on type 'SVGProps<SVGImageElement>