if-else ステートメントを使用せずに ReactJS で条件付きレンダリングを実装するにはどうすればよいですか?

ReactJS の条件付きレンダリング: JSX の if-else ステートメント

ReactJS では、JSX 式内で if-else ステートメントを直接使用することはできません。これは、JavaScript の関数呼び出しとオブジェクトを作成するための糖衣構文である JSX の性質によるものです。

状態に基づいて要素を条件付きでレンダリングするには、次の代替アプローチがあります。

三項演算子:

次のように、三項演算子を使用して条件を評価し、結果に基づいてさまざまな要素をレンダリングします。以下に示す:

render() {
    return (   
        <view></view>

関数呼び出し:

if-else ロジックを評価し、適切な要素を返す関数を作成します。次に、JSX 式内から関数を呼び出します。

renderElement(){
   if(this.state.value == 'news')
      return data;
   return null;
}

render() {
    return (   
        <view></view>

三項演算子または関数呼び出しを利用すると、シーンを変更したりタブを使用したりせずに、ReactJS で要素を条件付きでレンダリングできます。

以上がif-else ステートメントを使用せずに ReactJS で条件付きレンダリングを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。