React 中的 if 語句

Rana Hasnain Khan 2024年2月15日 React React Statement
React 中的 if 語句

我們將介紹 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 為真

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. 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