共计 2658 个字符，预计需要花费 7 分钟才能阅读完成。
咱们曾经学会了 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>);
在线代码
公众号【前端嘛】
