react 也就這麼回事 02 —— JSX 插值表達式、條件渲染以及列表渲染

2022 年 2 月 23 日
筆記
javascript, React, VUE, 前端

我們已經學會了 React 創建元素和渲染元素

ReactDOM.render(<div>Hello React!</div>, document.getElementById("root"));

Hello React會被嵌入到<div>標籤中，並且顯示在頁面上。

那麼 React 如何將變數、算術運算、函數調用等表達式的結果顯示在頁面上呢？

插值表達式

React 提供了在 JSX 中嵌入表達式的方式，我們可以將表達式包裹在大括弧中，並將它嵌入 JSX 中

在下面的例子中，我們聲明了一個名為 name 的變數，然後在 JSX 中使用它

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

{name}這種用大括弧包裹一個表達式的寫法被稱為「插值表達式」

在 JSX 語法中，你可以在大括弧內放置任何有效的 JavaScript 表達式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表達式。

你甚至可以在大括弧中放置 JSX，因為 JSX 本身就是一個表達式。編譯之後，JSX 表達式會被轉換成普通的 JavaScript函數調用

在線程式碼

不同數據類型在插值表達式中的表現

雖然可以在大括弧中放置任何有效的 JavaScript 表達式，但是並不是所有數據類型都能顯示在頁面上

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
  <script crossorigin src="//unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="//unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
</body>
<script type="text/babel">
  let data1 = "Hello React!";
  let data2 = 1;
  let data3 = true;
  let data4 = undefined;
  let data5 = null;
  let data6 = [1, 2, 3];
  // let data7 = { name: "react" };
  let data7 = "object";
  let el = (
    <div>
      <div>{data1}</div>
      <div>{data2}</div>
      <div>{data3}</div>
      <div>{data4}</div>
      <div>{data5}</div>
      <div>{data6}</div>
      <div>{data7}</div>
    </div>
  );
  ReactDOM.render(el, document.getElementById("root"));
</script>

</html>

我們將不同數據類型的數據用大括弧包裹，嘗試將它們顯示在頁面上

經過觀察可以發現：

undefined、null 不會在頁面上顯示
數組[1, 2, 3]顯示在頁面上會變成：123
對象則會報錯

那麼如何正確顯示數組以及對象呢？此處暫且不表

條件渲染

在 React 中，你可以依據應用的不同狀態，只渲染對應狀態下的部分內容，即條件渲染

條件渲染的其中一個方式就是：在插值表達式中使用與運算符&&或者三目運算符condition ? true : false

let data = "Hello React!";
// let state = true;
let state = false;

let el = (
    <div>
        <div>{state && "state為true時顯示"}</div>
        <div>{state ? "state為true時顯示" : "state為false時顯示"}</div>
    </div>
);
ReactDOM.render(el, document.getElementById("root"));

在線程式碼

列表渲染

在大括弧中直接插入數組，並不能將數組元素逐一顯示

let data = [1, 2, 3];
let el = (
    <div>
        {data}
    </div>
);
ReactDOM.render(el, document.getElementById("root"));
// 頁面顯示:123

如果我們想讓數組的每個元素逐一通過<li>顯示，可以藉助函數逐一創建<li>，然後將函數插入插值表達式中

示例如下：

let data = [1, 2, 3];
const toList = (list) => {
    let ret = [];
    list.forEach((element) => {
        ret.push(<li>{element}</li>);
    });
    return ret;
};

let el = <ul>{toList(data)}</ul>;
ReactDOM.render(el, document.getElementById("root"));

在這個示例中，我們用forEach遍曆數組，使用 JSX 創建 React 元素，將每個數組元素都用<li>標籤包裹，得到了新的數組[<li>1</li>, <li>2</li>, <li>3</li>]

又在<ul>{toList(data)}</ul>中通過插值表達式來將新數組嵌入到<ul>元素中

我們已經知道了{}中的數組顯示規則：去掉[]和,

於是最終得到：

let el = (
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
);

回過頭來看函數toList：用已有數組生成新數組

我們可以用map方法和箭頭函數來進一步簡化這個方法：

const toList = (list) => list.map((element) => <li>{element}</li>);

在線程式碼

公眾號【前端嘛】

Tags: javascript React VUE 前端