If-Else-Komponente konfigurieren, Reagieren

Question

Ich habe ein Element if-else zu meiner React Component per documentation hinzugefügt; Aufgrund der syntaktischen Unterschiede zwischen der Einfügung einer React-Komponente mit <></> und {} bin ich nicht sicher, wie ich die Komponente weiter konfigurieren soll. Hier

ist eine reduzierte Version von dem, was ich habe (geschrieben in Typoskript):

public render() { 
    const mediaElement: HTMLMediaElement = this.getMediaElement(); 
    return { mediaElement }; 
} 

Hier wird getMediaElement() reduziert:

private getMediaElement() { 
    //... video can also be returned 
    return document.createElement("audio"); 
    //... 
} 

Von hier vorzugsweise inline, ich möchte in der Lage sein, zum Hinzufügen von Klasseninformationen, usw., etwas Ähnliches (wie auch in React möglich):

Wie gehe ich beim Zugriff auf Eigenschaften des Elements mit der obigen Syntax vor? Letztendlich muss ich einen Verweis zuweisen. Jede Dokumentation wäre großartig!

Ist es nur durch Objekteigenschaften machbar, d.h .:

mediaElement.src = ""

Answer 1

Ich denke, Ihr bester Ansatz ein Reagieren Element anstelle von einfachem HTML-Elemente zu machen wäre. Siehe React.js write components directly in HTML.

Sie können den Code neu schreiben wie:

private getMediaElement(src) { 
    //... video can also be returned 
    return (<audio src={ src } />); 
    //... 
} 

public render() { 
    const mediaElement = this.getMediaElement(this.props.src); 
    return (mediaElement); 
} 

Dann können Sie die Requisiten der Klasse über die Requisiten Ihrer Komponente später zugreifen.