React の If ステートメント

Rana Hasnain Khan 2024年2月15日 React React Statement
React の If ステートメント

react の if ステートメントと、react の render 関数での使用方法を紹介します。

React の if ステートメント

反応アプリケーションを構築するとき、特定の条件に基づいて一部のコンテンツを表示または非表示にする必要がある場合があります。react での条件付きレンダリングは、JavaScript での条件と同じように機能します。

まず、UserGreetings.Js という新しいファイルを作成します。ファイル内に、クラスコンポーネントを作成しましょう。それでは、named export を削除しましょう。

JSX では、Welcome User!を返します。UserGreetings.Js ファイルは次のようになります。

# react
import React, {Component} from 'react';

class UserGreetings extends Component {
    render() {
        return (
            <div>
                Welcome User!
            </div>
        );
    }
}

export default UserGreetings;

次に、App.js ファイルに UserGreetings をインポートします。

# react
import UserGreetings from "./UserGreetings"

次に、UserGreetings コンポーネントを含めます。

# react
<UserGreetings />

したがって、App.js のコードは次のようになります。

# react
import "./styles.css";
import UserGreetings from "./UserGreetings"
export default function App() {
  return (
    <div className="App">
      <UserGreetings />
    </div>
  );
}

出力：

if ステートメント UserGreetings コンポーネントの表示に反応する

次に、UserGreetings.js ファイルに戻り、コンストラクターを追加して変更を加え、コンストラクター内で super を呼び出してから state を定義しましょう。次に、LoggedIn という 1つの状態プロパティを作成し、それを false に初期化します。

次に、JSX に、Welcome Guest!という別のメッセージを追加しましょう。UserGreetings.js のコードは次のようになります。

# react
import React, { Component } from "react";

class UserGreetings extends Component {
  constructor(props) {
    super(props);

    this.state = {
      LoggedIn: false
    };
  }

  render() {
    return (
      <div>
        <div>Welcome User!</div>
        <div>Welcome Guest!</div>
      </div>
    );
  }
}

export default UserGreetings;

それでは、if ステートメントを作成しましょう。LoggedIn が true の場合、Welcome User!が表示されます。LoggedIn が false の場合、Welcome Guest!と表示されます。

# react
if(this.state.LoggedIn){
      return(
        <div>Welcome User!</div>
      )
    }

LoggedIn が false の場合、else 条件。

# react
else{
    return(
    <div>Welcome Guest!</div>
    )
}

したがって、UserGreetings.js ファイルは次のようになります。

# react
import React, { Component } from "react";

class UserGreetings extends Component {
  constructor(props) {
    super(props);

    this.state = {
      LoggedIn: false
    };
  }

  render() {
    if(this.state.LoggedIn){
      return(
        <div>Welcome User!</div>
      )
    } 
    else{
      return(
      <div>Welcome Guest!</div>
      )
  }
  }
}

export default UserGreetings;

出力：

if ステートメントに反応する-LoggedIn が false の場合

したがって、結果からわかるように、正常に機能します。LoggedIn が false に設定されているため、Welcome Guest が返されます。

それでは、true に設定しましょう。

# react
import React, { Component } from "react";

class UserGreetings extends Component {
  constructor(props) {
    super(props);

    this.state = {
      LoggedIn: true
    };
  }

  render() {
    if(this.state.LoggedIn){
      return(
        <div>Welcome User!</div>
      )
    } 
    else{
      return(
      <div>Welcome Guest!</div>
      )
  }
  }
}

export default UserGreetings;

出力：

if ステートメントに反応する-LoggedIn が true の場合

チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
著者： Rana Hasnain Khan
Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn