React 中的 if 语句

Rana Hasnain Khan 2022年5月18日
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 语句。如果 LoggedIntrue,它应该显示 Welcome User!如果 LoggedInfalse,它应该显示 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 为真

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