我們已經學會了 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="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://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 = "https://www.cnblogs.com/bidong/archive/2022/02/23/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 = https://www.cnblogs.com/bidong/archive/2022/02/23/[1, 2, 3];
let el = (
{data}
);
ReactDOM.render(el, document.getElementById("root"));
// 頁面顯示:123
如果我們想讓陣列的每個元素逐一通過<li>顯示，可以借助函式逐一創建<li>，然后將函式插入插值運算式中
示例如下：
let data = https://www.cnblogs.com/bidong/archive/2022/02/23/[1, 2, 3];
const toList = (list) => {
let ret = [];
list.forEach((element) => {
ret.push({element} );
});
return ret;
};
let el = {toList(data)}
;
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>);
在線代碼
公眾號【前端嘛】
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/431439.html
標籤：其他