JSX中使用花括号包含JavaScript代码
JSX 允许您在 JavaScript 文件中编写类似 HTML 的标记，将呈现逻辑和内容保持在同一位置。 有时您会希望在该标记内添加一些 JavaScript 逻辑或引用动态属性。 在这种情况下，您可以在 JSX 中使用大括号为 JavaScript 打开一个窗口。
你将学习
- 如何传递带引号的字符串
- 如何使用大括号在 JSX 中引用 JavaScript 变量
- 如何使用大括号在 JSX 中调用 JavaScript 函数
- 如何在带有花括号的 JSX 中使用 JavaScript 对象
传递带引号的字符串
当你想将一个字符串属性传递给 JSX 时，你可以将它放在单引号或双引号中：
export default function Avatar() {
return (
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="Gregorio Y. Zara"
/>
);
}
在这里，“https://i.imgur.com/7vQD0fPs.jpg”和“Gregorio Y. Zara”作为字符串传递。
但是，如果您想动态指定 src 或 alt 文本怎么办？ 您可以通过将“和”替换为 { 和 } 来使用来自 JavaScript 的值：
export default function Avatar() {
const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
const description = 'Gregorio Y. Zara';
return (
<img
className="avatar"
src={avatar}
alt={description}
/>
);
}
请注意 className="avatar" 和 src={avatar} 之间的区别，前者指定使图像变圆的“avatar”CSS 类名，后者读取名为 avatar 的 JavaScript 变量的值。 那是因为花括号让您可以在标记中直接使用 JavaScript！
使用花括号：进入 JavaScript 世界的窗口
JSX 是一种特殊的 JavaScript 编写方式。 这意味着可以在其中使用 JavaScript——使用花括号 {}。 下面的例子首先为科学家声明了一个名字，name，然后用大括号将它嵌入到 <h1> 中：
export default function TodoList() {
const name = 'Gregorio Y. Zara';
return (
<h1>{name}'s To Do List</h1>
);
}
尝试将名称的值从“Gregorio Y. Zara”更改为“Hedy Lamarr”。 查看待办事项列表标题如何变化？
任何 JavaScript 表达式都可以在大括号之间工作，包括像 formatDate() 这样的函数调用：
const today = new Date();
function formatDate(date) {
return new Intl.DateTimeFormat(
'en-US',
{ weekday: 'long' }
).format(date);
}
export default function TodoList() {
return (
<h1>To Do List for {formatDate(today)}</h1>
);
}
在哪里使用花括号
你只能在 JSX 中以两种方式使用大括号：
- 作为直接在 JSX 标签内的文本：<h1>{name}'s To Do List</h1> 有效，但 <{tag}>Gregorio Y. Zara's To Do List</{tag}> 无效。
- 作为紧跟在 = 符号之后的属性：src={avatar} 将读取 avatar 变量，但 src="{avatar}" 将传递字符串“{avatar}”。
使用“双重花括号”：CSS 和 JSX 中的其他对象
除了字符串、数字和其他 JavaScript 表达式之外，您甚至可以在 JSX 中传递对象。 对象也用大括号表示，例如 { name: "Hedy Lamarr", inventions: 5 }。 因此，要在 JSX 中传递一个 JS 对象，必须将对象包裹在另一对花括号中：person={{ name: "Hedy Lamarr", inventions: 5 }}。
您可能会在 JSX 中的内联 CSS 样式中看到这一点。 React 不要求您使用内联样式（CSS 类在大多数情况下工作得很好）。 但是当你需要一个内联样式时，你将一个对象传递给 style 属性：
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 和颜色的值。
当你这样写时，你真的可以看到大括号内的 JavaScript 对象：
<ul style={
{
backgroundColor: 'black',
color: 'pink'
}
}>
下次你在 JSX 中看到 {{ 和 }} 时，要知道它只不过是 JSX 卷曲内的一个对象！
"陷阱
内联样式属性以驼峰式命名。 例如，HTML <ul style="background-color: black"> 在您的组件中将写为 <ul style={{ backgroundColor: 'black' }}>。
使用 JavaScript 对象和花括号的更多乐趣
您可以将多个表达式移动到一个对象中，并在您的 JSX 大括号内引用它们：
const person = {
name: 'Gregorio Y. Zara',
theme: {
backgroundColor: 'black',
color: 'pink'
}
};
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="Gregorio Y. Zara"
/>
<ul>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
</ul>
</div>
);
}
在此示例中，person JavaScript 对象包含一个name字符串和一个theme对象：
const person = {
name: 'Gregorio Y. Zara',
theme: {
backgroundColor: 'black',
color: 'pink'
}
};
组件可以像这样使用来自 person 的这些值：
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
JSX 作为一种模板语言非常精简，因为它允许您使用 JavaScript 组织数据和逻辑。
回顾
现在你几乎了解了 JSX 的一切：
- 引号内的 JSX 属性作为字符串传递。
- 大括号让您可以将 JavaScript 逻辑和变量带入您的标记中。
- 它们在 JSX 标签内容内部或紧跟在属性中的 = 之后工作。
- {{ 和 }} 不是特殊语法：它是一个包含在 JSX 大括号内的 JavaScript 对象。
网友评论