插值语法#
在 React 中,花括号 {} 用于将 JavaScript 表达式插入到 JSX 中。
你可以插入数字、字符串、数组（普通类型）、JSX 元素、三元表达式、函数调用等各种类型的表达式。
需要注意的是,插入的内容必须是一个表达式,不能是语句,如 if 语句等。
1import './App.css'
2
3export default function App() {
4 return (
5 <>
6 {/* 插入数字 */}
7 {/* 直接插入数字 123 */}
8 <div>{123}</div>
9
10 {/* 插入字符串 */}
11 {/* 插入字符串 '456',也可以不加引号直接写 456,因为 JSX 中的文本内容会被自动识别为字符串 */}
12 <div>{'456'}</div>
13
14 {/* 插入数组 */}
15 {/* 插入数组,数组中的每个元素会被转换为字符串并拼接在一起,显示为 '123' */}
16 <div>{['1', 2, '3']}</div>
17
18 {/* 插入 JSX 元素 */}
19 {/* 插入一个 JSX 元素,即一个 span 标签,里面包含文本 '123' */}
20 <div>{<span>123</span>}</div>
21
22 {/* 插入三元表达式 */}
23 {/* 插入一个三元表达式,根据条件的真假值显示 'yes' 或 'no',这里条件为 true,所以显示 'yes' */}
24 <div>{true ? 'yes' : 'no'}</div>
25
26 {/* 插入函数调用 */}
27 {/* 插入一个函数调用,将数字 3.1415926 四舍五入到小数点后两位,显示为 '3.14' */}
28 <div>{3.1415926.toFixed(2)}</div>
29 </>
30 )
31}目录