Конфигурирование If-Else Component, React

Question

Я добавил элемент if-else к моему компоненту React на documentation; однако, из-за синтаксических различий между включением компонента React с <></> и {} Я не уверен, как еще больше настроить компонент.

Вот сокращенный вариант того, что я (написано в машинопись):

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

Здесь getMediaElement() снижается:

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

Отсюда, предпочтительно рядный, я хотел бы быть в состоянии для добавления информации о классе и т. д., что-то похожее на (как это также можно сделать в реактиве):

<li className="media-file-title"> 

Как мне получить доступ к свойствам элемента с указанным выше синтаксисом? В конечном счете, мне нужно назначить ref. Любая документация будет замечательной!

Является ли это выполнимо только через свойство объекта, т.е .:

mediaElement.src = ""

Answer 1

Я думаю, лучший подход был бы отрендерить Реагировать элемент вместо обычного HTML-элемент. См. React.js write components directly in HTML.

Вы можете переписать код, как:

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

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

Тогда вы можете получить доступ к реквизиту класса позже с помощью реквизита компонента.