DEV Community
·
React中的JSX：在JavaScript中编写HTML的解释
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
JSX（JavaScript XML）是JavaScript中的一种语法扩展，允许编写HTML，使React组件更易读。使用JSX时，需有一个父元素，JavaScript表达式用{}包裹，使用className代替class，并自闭合元素如<img />。
🎯
关键要点
- JSX（JavaScript XML）是JavaScript中的一种语法扩展，允许在JavaScript中编写HTML。
- JSX使React组件更易读和富有表现力。
- JSX的语法规则包括：必须有一个父元素。
- 使用className代替class，因为class是JavaScript中的保留关键字。
- JSX中的表达式必须用{}包裹。
- 没有子元素的标签应自闭合，如<img />。
- JSX可以在其中使用JavaScript，例如动态内容和调用函数。
- JSX在底层编译为React.createElement()，使编写React更简单。
❓
延伸问答
什么是JSX，它有什么用？
JSX（JavaScript XML）是JavaScript中的一种语法扩展，允许在JavaScript中编写HTML，使React组件更易读和富有表现力。
JSX的语法规则有哪些？
JSX的语法规则包括：必须有一个父元素，使用className代替class，表达式用{}包裹，自闭合元素如<img />。
为什么在JSX中使用className而不是class？
因为class是JavaScript中的保留关键字，所以在JSX中使用className来代替。
如何在JSX中使用JavaScript表达式？
在JSX中，JavaScript表达式必须用{}包裹，例如：<h1>Welcome to {name}!</h1>。
JSX是如何编译成React代码的？
JSX在底层编译为React.createElement()，使得编写React组件更简单。
使用JSX有什么安全性优势？
JSX自动转义值，从而防止XSS攻击，增强了安全性。
➡️
