React レンダー関数で if...else... ステートメントを使用することはできますか?

Question

基本的に、render() 関数本体が次のような React コンポーネントがあります: (これは私の理想的なもので、現時点では機能しません)< /p>

render(){
    戻る （
        <div>
            <要素1/>
            <要素2/>

            // 注: ロジックのみです。ここではコードは機能しません
            if (this.props.hasImage) <ElementWithImage/>
            else <ElementWithoutImage/>

        </div>
    ）
}

Answer 1

実際には、OP が要求したことを正確に実行する方法があります。次のように匿名関数をレンダリングして呼び出すだけです:

リーリー

Answer 2

まったく同じではありませんが、回避策があります。 React ドキュメント には、条件付きレンダリングに関するセクションがあるので、参照してください。以下は、インライン if-else を使用して何ができるかの例です。

リーリー

render 関数内で、jsx を返す前に処理することもできます。

リーリー

ZekeDroid がコメントで取り上げたことも言及する価値があります。条件をチェックするだけで、条件を満たさない特定のコード部分を表示したくない場合は、&& 演算子 を使用できます。

リーリー