我们已经学会了 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 = "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>);
公众号【前端嘛】