React レンダー関数で if...else... ステートメントを使用することはできますか?
P粉760675452
P粉760675452 2023-08-23 18:27:14
0
2
462
<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>
P粉760675452
P粉760675452

全員に返信(2)
P粉288069045

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

リーリー
いいねを押す +0
P粉176980522

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

リーリー

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

リーリー

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

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート