SVG Viewbox Fehler mit React

Question

Ich kann nicht für das Leben von mir herausfinden, was hier falsch läuft. Ich habe die folgende Komponente:

import React, { Component } from 'react'; 

class MySvg extends Component { 
    render() { 
    return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {this.props.width} {this.props.height}"></svg> 
    ); 
    } 
} 

export default MySvg; 

Wenn ich versuche, um die Komponente zu machen, bekomme ich folgende Fehlermeldung:

Error: <svg> attribute viewBox: Expected number, "0 0 {this.props.widt…"... 

ich 100% sicher bin, dass beiden Requisiten Zahlen sind. Sie haben eine Art von Nummer, wenn ich console.log, und sie sind als Zahlen übergeben. Ist das ein Problem mit React?

Answer 1

Das Problem ist, Ihre Requisiten sind in der Zeichenfolge und es wird nicht ausgewertet und deshalb zugewiesen. Verwenden Sie stattdessen so etwas.

<svg xmlns="http://www.w3.org/2000/svg" viewBox={"0 0 "+ this.props.width + " " + this.props.height}></svg> 

Auf diese Weise schaffen wir grundsätzlich den Wert von Requisiten und Streicher in den Klammern verketten. Weil innerhalb der Klammern alles JavaScript ist.