If-Elseコンポーネントを構成する、反応する

Question

if-else要素をリアクタコンポーネントdocumentationに追加しました。しかし、<></>と{}のReactコンポーネントを含むことに構文上の違いがあるため、コンポーネントをさらに構成する方法がわかりません。ここで

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

getMediaElement()が低減されています：

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

ここからは、好ましくは、インライン、私はできるようにしたいと思います。ここ

は、私が（活字体で書かれた）しているものの縮小版でありますクラス情報などを追加するには（Reactでも可能）：

<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); 
} 

。