Ich versuche eine React-Komponente zu schreiben. für HTML-Überschriften-Tags (h1, h2, h3 usw.), bei denen sich die Überschriftenpriorität basierend auf der in den Requisiten definierten Priorität dynamisch ändert.
Hier was ich versuche zu tun.
<h{this.props.priority}>Hello</h{this.props.priority}>
erwartete Ausgabe:
<h1>Hello</h1>
Das funktioniert nicht. Gibt es eine mögliche Methode, um dies zu tun?
Antworten:
Keine Möglichkeit, dies an Ort und Stelle zu tun, setzen Sie es einfach in eine Variable ( mit großgeschriebenem Anfangsbuchstaben ):
quelle
React.createClass
, ich bevorzuge diesen Weg. Vielen Dank.<CustomTag foo="bar">
var foo = { bar: CustomTag }; return <foo.bar />
funktioniert gut.Der Vollständigkeit halber können Sie, wenn Sie einen dynamischen Namen verwenden möchten, auch direkt aufrufen,
React.createElement
anstatt JSX zu verwenden:Dadurch muss keine neue Variable oder Komponente erstellt werden.
Mit Requisiten:
Aus den Dokumenten :
quelle
Wenn Sie TypeScript verwenden, wird ein Fehler wie der folgende angezeigt:
TypeScript weiß nicht, dass
CustomTag
es sich um einen gültigen HTML-Tag-Namen handelt, und gibt einen nicht hilfreichen Fehler aus.Zum Reparieren
CustomTag
alskeyof JSX.IntrinsicElements
!quelle
Types of property 'crossOrigin' are incompatible. Type 'string | undefined' is not assignable to type '"" | "anonymous" | "use-credentials" | undefined'. Type 'string' is not assignable to type '"" | "anonymous" | "use-credentials" | undefined'.
Alle anderen Antworten funktionieren gut, aber ich würde einige zusätzliche hinzufügen, weil auf diese Weise:
Die Überschriftenkomponente:
Welches können Sie es wie verwenden
oder Sie können ein anderes abstraktes Konzept haben, zum Beispiel können Sie eine Größe Requisiten definieren wie:
Welches können Sie es wie verwenden
quelle
Bei dynamischen Überschriften (h1, h2 ...) könnte eine Komponente wie
React.createElement
oben erwähnt (oben von Felix erwähnt ) zurückkehren.Aus Gründen der Kompositionsfähigkeit werden sowohl Requisiten als auch Kinder übergeben.
Siehe Beispiel
quelle