JSX 简介

最新推荐文章于 2025-08-01 19:17:31 发布

原创最新推荐文章于 2025-08-01 19:17:31 发布 · 237 阅读

CC 4.0 BY-SA版权

文章标签：

9 篇文章

订阅专栏

"JSX是一种在JavaScript中书写XML样式的语法，常用于React框架。它允许开发者在代码中直接创建UI组件。JSX提供了一种方便的方式来嵌入表达式和设置属性，并且在渲染时默认进行转义，防止XSS攻击。例如，通过JSX可以创建带表达式的元素如`<h1>Hi, {name}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const el = <div> hello,world!</div>；

简单点就是标签语法，长得既不像字符串也不像HTML，它叫JSX。

在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

表达式用{}包裹，大括号内可以放置任何有效的JavaScript代码。

const name = 'shaoin';
const el = <h1> Hi,{name} </h1>;

ReactDOM.render(
	el,
  document.getElementById('root')
);

属性值：可以使用引号指定为字符串字面量

const el = <div tabIndex="0"></div>;

也可以用{}通过JavaScript表达式的方式指定

const el = <img src={image.url}></img>;

在JSX中class变成className，tabindex 变成tabIndex。

const el = (
	<div className="title">
  	<p tabIndex="{num}">HI</p>
  	<span>my love</span>
  </div>
)

React DOM 在渲染内容前，默认进行转义。可以有效的防止注入非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止XSS（cross-site-scripting 跨站脚本）攻击。

const el = {
  <h1 className="title">
  	Hi,my love
  </h1>
}
// 等价于
const el = React.createElement(
	'h1',
  {classNmae:'title'},
  'Hi,my love'
)

点赞评论收藏 ~~ 开启React学习之路 ~~ 点赞评论收藏