JSX條件渲染（四）——形式4種：js形式條件渲染 & 元素變數 & 行內條件渲染 & 阻止渲染

阿新 • • 發佈：2021-01-08

JSX條件渲染——形式4種：js形式條件渲染 & 元素變數 & 行內條件渲染 & 阻止渲染

js形式條件渲染

function showForm (flag) {
  // 根據引數flag的狀態顯示不同內容
  if(flag) {
    // 顯示登陸框
    return <div>登陸框</div>
  } else {
    // 顯示註冊框
    return <div>註冊框</div>
  }
}

元素變數

function showForm (flag) { 

  // 根據引數flag的狀態顯示不同內容
  let form = null;
  if(flag) {
    form = <div>登陸</div>
  } else {
    form = <div>註冊</div>
  }
  return form
}

行內條件渲染

function showForm (flag) {
  // return <div>{flag? '登陸': '註冊'}</div>
  // return <div>{flag ? <div>登陸</div>: <div>註冊</div>}</div> 

  return <div>{flag && <div>條件成立就顯示</div>}</div>
}

阻止渲染

function showForm (flag) {
  if (flag) {
    return null;
  }
  return <div>阻止渲染</div>
}

檔案結構

在這裡插入圖片描述

公共html檔案

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" 
>
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./style/style.css">
  <!-- 第一步：引入相關js庫檔案 -->
  <script type="text/javascript" src="./lib/react.development.js"></script>
  <script type="text/javascript" src="./lib/react-dom.development.js"></script>
  <!-- babel檔案的作用：編譯React程式碼，使之變成原生js程式碼才可以在瀏覽器中執行 -->
  <script type="text/javascript" src="./lib/babel.min.js"></script>
</head>

<body>
  <!-- 第二步：頁面中需要提供一個容器 -->
  <div id="root"></div>
  <!-- 第三步：可以基於React實現前端功能 -->
  <script type="text/babel" src="./js/05-JSX條件渲染.js"></script>
</body>

</html>

在VScode中，在VScode中開啟，需安裝外掛Live Server，右鍵開啟Open With Live Server,開啟頁面

例項01-js形式條件渲染

js檔案

/*
  JSX條件渲染
*/
// js形式條件渲染
function showLoginOrRegisterForm (flag) {
  // 條件渲染
  if (flag) {
    // 登入表單
    return (
      <div>登入表單</div>
    )
  } else {
    // 登錄檔單
    return (
      <div>登錄檔單</div>
    )
  }
}
//此處為空或false時，顯示為——登錄檔單；true時——登入表單
let element = <div>{showLoginOrRegisterForm(false)}</div>

ReactDOM.render(element, document.getElementById('root'))

顯示

在這裡插入圖片描述

例項02- 元素變數

js檔案

/*
  JSX條件渲染
*/
// js形式條件渲染
// function showLoginOrRegisterForm (flag) {
//   // 條件渲染
//   if (flag) {
//     // 登入表單
//     return (
//       <div>登入表單</div>
//     )
//   } else {
//     // 登錄檔單
//     return (
//       <div>登錄檔單</div>
//     )
//   }
// }

// 元素變數
function showLoginOrRegisterForm (flag) {
  // 條件渲染
  let form = null
  if (flag) {
    form = <div>登入表單</div>
  } else {
    form = <div>登錄檔單</div>
  }
  return form
}
//此處為空或false時，顯示為——登錄檔單；true時——登入表單
let element = <div>{showLoginOrRegisterForm(true)}</div>

ReactDOM.render(element, document.getElementById('root'))

顯示結果同上

在這裡插入圖片描述

例項03-行內條件渲染

js檔案

/*
  JSX條件渲染
*/
// js形式條件渲染
// function showLoginOrRegisterForm (flag) {
//   // 條件渲染
//   if (flag) {
//     // 登入表單
//     return (
//       <div>登入表單</div>
//     )
//   } else {
//     // 登錄檔單
//     return (
//       <div>登錄檔單</div>
//     )
//   }
// }

// 元素變數
// function showLoginOrRegisterForm (flag) {
//   // 條件渲染
//   let form = null
//   if (flag) {
//     form = <div>登入表單</div>
//   } else {
//     form = <div>登錄檔單</div>
//   }
//   return form
// }

// 行內條件渲染
function showLoginOrRegisterForm () { 
    // true-顯示女；false-顯示男
  let gender = true
  return <div>{gender? <div>男<input type="radio"/></div> : <div>女<input type="radio"/></div>}</div>
}

//預設為空
let element = <div>{showLoginOrRegisterForm()}</div>

ReactDOM.render(element, document.getElementById('root'))

顯示

在這裡插入圖片描述

例項04-阻止渲染

js檔案

/*
  JSX條件渲染
*/
// js形式條件渲染
// function showLoginOrRegisterForm (flag) {
//   // 條件渲染
//   if (flag) {
//     // 登入表單
//     return (
//       <div>登入表單</div>
//     )
//   } else {
//     // 登錄檔單
//     return (
//       <div>登錄檔單</div>
//     )
//   }
// }

// 元素變數
// function showLoginOrRegisterForm (flag) {
//   // 條件渲染
//   let form = null
//   if (flag) {
//     form = <div>登入表單</div>
//   } else {
//     form = <div>登錄檔單</div>
//   }
//   return form
// }

// 行內條件渲染
// function showLoginOrRegisterForm () { 
//   let gender = false
//   return <div>{gender? <div>男<input type="radio"/></div> : <div>女<input type="radio"/></div>}</div>
// }

// 阻止渲染
function showInfo (flag) {
    //flag為false-顯示文字；為true-顯示空/白屏
  if (flag) {
    return null
  }
  return <div>阻止渲染</div>
}

// let element = <div>{showLoginOrRegisterForm()}</div>
let element = <div>{showInfo(false)}</div>

ReactDOM.render(element, document.getElementById('root'))

顯示

在這裡插入圖片描述

JSX條件渲染（四）——形式4種：js形式條件渲染 & 元素變數 & 行內條件渲染 & 阻止渲染

技術標籤：react知識jsreactjs JSX條件渲染——形式4種：js形式條件渲染 & 元素變數 & 行內條件渲染 & 阻止渲染

機器學習sklearn（77）：演算法例項（三十四）迴歸（六）線性迴歸大家族（四）多重共線性：嶺迴歸與Lasso（一）嶺迴歸

1 最熟悉的陌生人：多重共線性逆矩陣存在的充分必要條件行列式不為0的充分必要條件

Centos7.4安裝openstack（queens）詳細安裝部署（四）－計算服務（nova）安裝

一、創庫授權　　1.1、（控制節點）配置資料庫 mysql -u root -pADMIN_PASS 　　1.2、建立nova相關資料庫並設定訪問許可權

醫院資訊整合平臺專案建設方案與實踐第4章專案建設設計（四）

4.3.4.2整體架構 4.3.4.3主要建設內容 STM 使用者系統 4.3.4.3.1源系統源系統是指術語及主資料管理系統所管理的術語與主資料來源的系統。術語與主資料的新增、修改、刪除和停用等維護工作

杭電計算機組成實驗4（四）暫存器堆設計實驗

技術標籤：杭電計算機組成實驗實驗內容 1. 學習使用Verilog HDL 進行時序電路的設計方法 2. 掌握靈活運用Verilog HDL進行各種描述與建模的技巧和方法 3. 學習暫存器堆的資料傳送與讀/寫工作原理，掌握暫存器堆的

c語言並行程式設計之路（四）（barrier的實現和條件變數）

0.前言接下來看共享記憶體程式設計的另一個問題：通過保證所有執行緒在程式中處於同一個位置來同步執行緒。這個同步點稱為barrier，翻譯為路障、柵欄等。只有所有執行緒都抵達此路障，執行緒才能繼續執行下去，否則

Halium 9 嚐鮮 -- 在小米平板4上的移植（四）

技術標籤：移植libhybris核心linux 修改kernel 檢查並修改核心選項 Halium提供了一個指令碼檢查defconfig的有些選項是否已經開啟。找到核心專案裡的defconfig，就可以開搞了。指令碼

（四）shell程式設計之條件測試

條件測試：判斷某需求是否滿足，需要由測試機制來實現，專用的測試表達式需要由測試命令輔助完成

爬蟲與Python：（四）爬蟲進階擴充套件之Pandas——4.資料結構DataFrame

1. 定義 DataFrame 是一個表格型的資料結構，它含有一組有序的列，每列可以是不同的值型別（數值、字串、布林型值）。DataFrame 既有行索引也有列索引，它可以被看做由 Series 組成的字典（共同用一個索引）。

OpenGL學習（四）-- 正面&背面剔除和深度測試

我的 OpenGL 專題學習目錄，希望和大家一起學習交流進步！ OpenGL學習（一）-- 術語瞭解

iOS網路（四）socket簡單應用

一、Socket概覽 Socket就是為網路服務提供的一種機制通訊的兩端都是socket 網路通訊其實就是socket間的通訊

Flink 系列（四）—— Flink Data Transformation

一、Transformations 分類 Flink 的 Transformations 操作主要用於將一個和多個 DataStream 按需轉換成新的 DataStream。它主要分為以下三類：

《深入理解Java虛擬機器器》（四）：垃圾收集演演算法以及記憶體分配策略

============== 讀書筆記系列 ============== 接下來我們就要聊到最常見的問題了，垃圾收集演演算法，以及記憶體分配策略。

帶你入坑大資料（四）--- 資源排程框架Yarn

前言在MapReduce的時候也許很多人會有這種疑問：寫了MR後，map task和reduce task是如何在多節點上並行執行的，而且又是怎麼決定哪個任務執行再哪個節點上的？其實這些問題都是和這個Yarn有關。因為Yarn這個框架其實

Spring Cloud Alibaba（四）實現Dubbo服務消費

本專案演示如何使用 Spring Cloud Alibaba 完成 Dubbo 的RPC呼叫。 Spring Cloud與Dubbo Spring Cloud是一套完整的微服務架構方案

TICK技術棧（四）Grafana安裝及使用

1.什麼是Grafana？ Grafana是一款採用go語言和Angular框架編寫的開源的視覺化工具，主要用於大規模指標資料的視覺化展示，提供包括折線圖，餅圖，儀表盤等多種監控資料視覺化UI，是網路架構和應用分析中最流行的時序

[系列] - go-gin-api 路由中介軟體 - 捕獲異常（四）

概述首先同步下專案概況：上篇文章分享了，路由中介軟體 - 日誌記錄，這篇文章咱們分享：路由中介軟體 - 捕獲異常。當系統發生異常時，提示 “系統異常，請聯絡管理員！”，同時併傳送 panic 告警郵件。

Hive 系列（四）—— Hive 常用 DDL 操作

一、Database 1.1 檢視資料列表 show databases; 複製程式碼 1.2 使用資料庫 USE database_name;

Kafka 系列（四）—— Kafka 消費者詳解

一、消費者和消費者群組在 Kafka 中，消費者通常是消費者群組的一部分，多個消費者群組共同讀取同一個主題時，彼此之間互不影響。Kafka 之所以要引入消費者群組這個概念是因為 Kafka 消費者經常會做一些高延遲的操作

HBase 系列（四）—— HBase 叢集環境配置

一、叢集規劃這裡搭建一個 3 節點的 HBase 叢集，其中三臺主機上均為 Regin Server。同時為了保證高可用，除了在 hadoop001 上部署主 Master 服務外，還在 hadoop002 上部署備用的 Master 服務。Master 服務由 Zook

JSX條件渲染（四）——形式4種：js形式條件渲染 & 元素變數 & 行內條件渲染 & 阻止渲染

JSX條件渲染——形式4種：js形式條件渲染 & 元素變數 & 行內條件渲染 & 阻止渲染

例項01-js形式條件渲染

例項02- 元素變數

例項03-行內條件渲染

例項04-阻止渲染

相關推薦