React レンダー関数で if...else... ステートメントを使用することはできますか?
P粉760675452
2023-08-23 18:27:14
<p>基本的に、<code>render()</code> 関数本体が次のような React コンポーネントがあります: (これは私の理想的なもので、現時点では機能しません)< /p>
<pre class="brush:js;toolbar:false;">render(){
戻る (
<div>
<要素1/>
<要素2/>
// 注: ロジックのみです。ここではコードは機能しません
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</div>
)
}
</pre>
<p><br /></p>
実際には、OP が要求したことを正確に実行する方法があります。次のように匿名関数をレンダリングして呼び出すだけです:
リーリーまったく同じではありませんが、回避策があります。 React ドキュメント には、条件付きレンダリングに関するセクションがあるので、参照してください。以下は、インライン if-else を使用して何ができるかの例です。
リーリーrender 関数内で、jsx を返す前に処理することもできます。
リーリーZekeDroid がコメントで取り上げたことも言及する価値があります。条件をチェックするだけで、条件を満たさない特定のコード部分を表示したくない場合は、
リーリー&& 演算子
を使用できます。