2017-02-07 6 views
0

Ich habe eine menuItem Komponente und ihre Requisiten ist ein Symbol Komponente von mir erstellt und FontIcon genannt.Reactjs, wie Zeichenfolge in [Objekt Objekt] konvertiert

Und in menuItem Requisiten können Sie einen Namen des Symbols als Zeichenfolge übergeben, zum Beispiel: leftIcon="face", aber Sie können auch einen Code für die Komponente wie folgt übergeben: leftIcon='<FontIcon style={{color:"red"}} className="face" />'.

Im ersten Fall werden alle funktioniert perfekt, die Requisiten auf die Variable übergeben wird, wenn der Code für die Komponente:

leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />;

Aber diese zweite Möglichkeit nicht funktioniert. Wenn der Benutzer den gesamten Code geht muss ich etwas dazu (dieser Größenwert wie oben) an, an dieser Stelle diese Zugabe Werke:

leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>");

Here I if habe zu prüfen, was die Benutzer weitergegeben :

if (_props.leftIcon.match(/<.+\/>/)) { 
    leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>"); 
} else { 
    leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />; 
} 

Aber auf diese zweite Weise bekomme ich eine Zeichenfolge und es funktioniert nicht. Es gibt kein Symbol, aber es gibt einen String mit Code:

enter image description here

Also habe ich getröstet log dies und es ist, was ich habe:

enter image description here

Die typeof dieser erste ist Objekt, aber dieses zweite ist Zeichenfolge.

Was kann also tun, um diesen zweiten Weg zu machen?

Antwort

0

Wenn dieser Code im Render-Teil ist, sollte dies funktionieren;

if (_props.leftIcon.match(/<.+\/>/)) { 
 
    leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>"); 
 
} else { 
 
    leftIcon = (<FontIcon size={_props.fontSize} className={_props.leftIcon} />); 
 
}

Beachten Sie die Klammer.

+0

leider funktioniert es nicht, weil Sie diesen Arbeitsteil ausgearbeitet haben, dieses erste 'if' funktioniert nicht, weil es Zeichenfolge ist. – Karol

+0

Ich habe verpasst, dass du es als Requisite durchgehst. In diesem Fall müssen Sie den Typ als Requisite übergeben und den Rest in menuItem ausführen. –

+0

Es tut mir leid, aber ich verstehe nicht, was meinst du: "Gib den Typ als Requisite". – Karol

0

Es gibt einen Weg Komponente aus Zeichenfolge erstellen Sie einen Blick auf this answer

nehmen Aber ich würde Ihnen vorschlagen, Stile und/oder Klassennamen und andere Parameter zu Ihrer Komponente passieren eher dann einen String und dann könnte man nur haben:

Verwandte Themen