if...else... ステートメントは React レンダリング関数で使用できますか?

Question

基本的に、react コンポーネントがあり、その render() 関数本体は次のとおりです: (これは私にとって理想的なコンポーネントであり、現在は機能しません)

リーリー

Answer 1

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

リーリー

Answer 2

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

リーリー

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

リーリー

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

リーリー