react学习笔记-在JSX中通过大括号使用JavaScript

在JSX中通过大括号使用JavaScript

JSX允许你在JavaScript中编写类似HTML的标签，从而使渲染的逻辑和内容可以写在一起。有时候，你可能要在标签中添加一些JavaScript逻辑或者引用动态的属性。这种情况下，你可以在JSX的大括号内编写JavaScript。

你将会学习搞：

-如何使用引号传递字符串

-在JSX的大括号内引用JavaScript变量

-在JSX的大括号内调用JavaScript函数

-在JSX的大括号内使用JavaScript对象

使用引号传递字符串

当你想把一个字符串属性传递给JSX时，把它放到单引号或双引号中：

App.js

export default function Avatar() {     return (         <img              className="avatar"             src="https://test.jpg"             alt="Gregoria y.zara"         />     ); }

这里的”"https://test.jpg”和”Gregoria y.zara”就是被作为字符串传递的。

但是如果你想要动态地指定src或alt的值呢？你可以用 { 和 } 替代” 和 “ 以使用JavaScript变量：

App.js:

export default function Avatar() {     const avatar = "https//test.jpg";     const description = "Gregoria y.zara"     return (         <img              className="avatar"             src={avatar}             alt={description}         />     ); }

请注意className=”avatar”和src={avatar}之间的区别，className=”avatar”指定了一个就叫“avatar”的使图片在样式上变圆的CSS类名，而src={avatar}这种写法会去读取JavaScript中avatar这个变量的值。这是因为大括号可以使用你直接在标签中使用JavaScript！

使用大括号：一扇进入JavaScript世界的窗户

JSX是一种编写JavaScript的特殊方式。因为在大括号 { }中使用JavaScript带来了可能。下面的示例中声明了科学家的名字，name，然后在<h1>后的大括号内嵌入它：

App.js：

export defualt function TodoList() {     const name = 'Gregorio Y. Zara';     return (         <h1>{name}的待办事项列表</h1>     ) }

试着将name的值从’Gregorio Y. Zara’更改成’Hedy Lamarr’。看看这个ToDoList的标题将如何变化？

大括号内的任何JavaScript表达式都能正常运行，包括像formatDate()这样的函数调用：

const today = new Date(); function formatDate(date) {     return new Intl.DateTimeFormat(         'zh-CN',         { weekday: 'long' }     ).format(date); } export default function TodoList() {     return (         <h1>To Do List for { formatDate(today) }</h1>     ); }

可以在哪使用大括号

在JSX中，只能在以下两种场景种使用大括号:

1. 用作JSX标签内的文本：<h1>{name}’s To Do List<h1>是有效的，但是<{tag}>Gregorio Y. Zara’s To Do List</{tag}>无效。
2. 用作紧跟在 = 符号后的属性: src={avatar}会读取avatar变量，但是src=”{avatar}”只会传一个字符串{avatar}。

使用“双大括号”：JSX中的CSS和对象

除了字符串、数字和其它JavaScript表达式，你甚至可以在JSX中传递对象。对象也用大括号表示，例如{ name: “Hedy Lamarr”, inventions: 5 }。因此，为了能在JSX中传递，你必须用另一个对额外的大括号包裹对象：person={{ name: “Hedy Lamarr”, inventions: 5 }}。

你可能在JSX的内联CSS样式中就已经见过这种写法了。React不要求你使用内联样式（使用CSS类就能满足大部分情况）。但是当你需要内联样式的时候，你可以给style属性传递一个对象：

App.js:

export default function ToDoList() {     return (         <ul style={{             backgroundColor: 'black',             color: 'pink'         }}>             <li>Improve the videophone</li>             <li>Prepare aeronautics lectures</li>             <li>Work on the alcohol-fuelled engine</li>         </ul>     ); }

试着更改一下backgroundColor和color的值。

当你写成这样时，你可以很清楚地看到大括号里包着的对象：

<ul style={{             backgroundColor: 'black',             color: 'pink'         }}>

所以当你下次在JSX中看到{{ 和 }}时，就知道它只不过时包在大括号里的一个对象罢了！

陷阱：

内联style属性使用驼峰命名法编写。例如，HTML <ul style=”background-color:black”>在你的组件里应该写成<ul style={{ backgroundColor: ‘black’ }}>。

JavaScript对象和大括号的更多可能

你可以将多个表达式合并到一个对象中，在JSX的大括号内分别使用它们：

App.js:

const person = {     name: 'Gregorio Y. Zara',     theme: {         blackgroundColor: 'black',         color: 'pink'     } }; export default function TodoList() {     return (         <div style={person.theme}>             <h1>{person.name}'的待办事项</h1>             <img                  className="avatar"                 src="https://test.jpg"                 alt="Gregorio Y. Zara"             />             <ul>                 <li>优化视屏电话</li>                 <li>准备航空学课程</li>                 <li>研究乙醇燃料引擎</li>             </ul>         </div>     ); }

在这个示例中，person JavaScript对象包含name中存储的字符串和theme对象：

const person = {     name: 'Gregorio Y. Zara',     theme: {         blackgroundColor: 'black',         color: 'pink'     } };

该组件可以这样使用来自person的值：

<div style={person.theme}>             <h1>{person.name}'的待办事项</h1>

JSX是一种模板语言的最小实现，因为它允许你通过JavaScript来组织数据和逻辑。

摘要：

现在你几乎了解了有关JSX的一切：

-JSX引号内的值会作为字符串传递给属性

-大括号让你可以将JavaScript的逻辑和变量带入到标签中。

-它们会在JSX标签中的内容区域或紧随属性的 = 后起作用。

- {{ 和 }} 并不是什么特殊的语法：它只是抱在JSX大括号内的JavaScript对象。

不能把对象渲染在标签内，需要传递对象的某个字符串类型的值才可以，否则会抛异常，因为React不知道你想如何展示它们。

练习：在JSX大括号内编写表达式

在下面的对象中，完整的图片URL被分成了四个部分：baseUrl、imageId、imageSize和文件拓展名。

我们希望这些组合组成图片的URL：baseUrl（一直都是’https://i.imgur.com/’）、imageId（‘7vqdofp’）、imageSize（‘s’）和文件拓展（总是’.jpg’）。但是，<img>标签src执行的方式有问题。

const baseUrl = 'https://i.imgur.com/'; const person = {   name: 'Gregorio Y. Zara',   imageId: '7vQD0fP',   imageSize: 's',   theme: {     backgroundColor: 'black',     color: 'pink'   } }; export default function TodoList() {   return (     <div style={person.theme}>       <h1>{person.name}'的待办事项</h1>       <img         className="avatar"         src="{baseUrl}{person.imageId}{person.imageSize}.jpg"         alt={person.name}       />       <ul>         <li>优化视屏电话</li>         <li>准备航空学课程</li>         <li>研究乙醇燃料引擎</li>       </ul>     </div>   ); }

优化：

你可以把它写成src={baseUrl + person.imageId + person.imageSize + ‘.jpg’}这样。

1. { 开启JavaScript表达式
2. baseUrl + person.imageId + person.imageSize + ‘.jpg’会生成正确的URL字符串
3. } 结束JavaScript表达式

const baseUrl = 'https://i.imgur.com/'; const person = {   name: 'Gregorio Y. Zara',   imageId: '7vQD0fP',   imageSize: 's',   theme: {     backgroundColor: 'black',     color: 'pink'   } }; export default function TodoList() {   return (     <div style={person.theme}>       <h1>{person.name}'的待办事项</h1>       <img         className="avatar"         src={baseUrl + person.imageId + person.imageSize + '.jpg'}         alt={person.name}       />       <ul>         <li>优化视屏电话</li>         <li>准备航空学课程</li>         <li>研究乙醇燃料引擎</li>       </ul>     </div>   ); }

也可以将此表达式封装成一个单独的函数，例如下面的getImageUrl:

utils.js:

export function getImageUrl(person) {     return (         'https://i.imgur.com/' +         person.imageId +          person.imageSize +          '.jpg'     ); }

App.js:

import { getImageUrl } from './utils.js' const person = {     name: 'Gregorio Y. Zara',     imageId: 'test',     imageSize: 's',     theme: {         backgroundColor: 'black',         color: 'pink'     } }; export default function TodoList() {     return (         <div style={person.theme}>             <h1>{person.name}'的待办事项</h1>             <img                  className="avatar"                 src={getImageUrl(person)}                 alt={person.name}             />             <ul>优化视屏通话</ul>             <ul>准备航空学课程</ul>             <ul>研究乙醇燃料引擎</ul>         </div>     ); }

变量和函数可以帮助你保持标签文本的简洁！