React基础第五章（JSX大括号的妙用）

在React的JSX中，大括号不仅是一个简单的符号，它是连接JavaScript世界和JSX的桥梁。本文将基于React官方文档中的知识点，探讨如何在JSX中通过大括号有效地使用JavaScript，并提供实用技巧、示例代码以及注意事项。

使用引号传递字符串

在JSX中，你可以使用引号来传递字符串值给属性。

技巧：

对于静态的字符串值，直接使用引号传递。

示例：

jsx 复制代码

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

注意事项：

当传递静态字符串时，确保使用引号而不是大括号。

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

当你需要动态指定属性值时，可以使用大括号来引用JavaScript变量。

技巧：

使用大括号{}来引用变量，使得代码更加灵活和可维护。

示例：

jsx 复制代码

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} // <- 变量
    />
  );
}

注意事项：

不要将大括号与引号混用，这会导致错误的字符串字面量传递。

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

你可以在JSX的大括号内调用JavaScript函数，以动态生成内容。

技巧：

利用函数调用来处理复杂的逻辑，然后将结果嵌入到JSX中。

示例：

jsx 复制代码

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>
  );
}

注意事项：

确保函数返回的是一个有效的React节点或值。

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

在JSX中，你可以使用双大括号{{}}来传递对象，这在内联样式中尤其常见。

技巧：

使用双大括号来传递样式对象，使得样式声明更加直观。

示例：

jsx 复制代码

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>
  );
}

注意事项：

使用内联样式时，属性名应该采用驼峰命名法。

总结

通过使用大括号，我们可以在JSX中灵活地引入JavaScript逻辑和变量。记住以下要点：

引号用于传递静态字符串。
大括号用于嵌入JavaScript表达式。
双大括号用于传递对象，尤其是内联样式。

不过，要注意不要滥用大括号，保持代码的清晰和可读性。

React基础 第五章（JSX大括号的妙用）

使用引号传递字符串

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

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

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

总结

React基础第五章（JSX大括号的妙用）