React 中的 if 語句

Rana Hasnain Khan 2022年5月18日

React React Statement

我們將介紹 react 中的 if 語句以及如何在 react render 函式中使用它。

React 中的 `if` 語句

當我們構建一個 React 應用程式時，我們可能經常需要根據某種條件顯示或隱藏一些內容。react 中的條件渲染的工作方式與 JavaScript 中的條件相同。

首先，我們將建立一個名為 UserGreetings.Js 的新檔案；在檔案中，讓我們建立一個類元件。現在讓我們刪除命名匯出。

在 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>
  );
}

輸出：

react if 語句 UserGreetings 元件顯示

現在，讓我們回到 UserGreetings.js 檔案並通過新增建構函式和在建構函式中呼叫 super 進行更改，然後定義 state。現在讓我們建立一個名為 LoggedIn 的狀態屬性並將其初始化為 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 為假，則為 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;

輸出：

React if 語句 - 如果 LoggedIn 為假

因此，正如你在結果中看到的那樣，它執行良好。它返回了 Welcome Guest，因為 LoggedIn 設定為 false。

現在讓我們將其設定為 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;

輸出：

React if 語句 - 如果 LoggedIn 為真

Author: Rana Hasnain Khan

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.