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.