[JavaScript知识库]JSX 简介

什么是JSX

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

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

为什么使用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>
)

JSX防注入攻击

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

JSX表示对象

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

关注博主即可阅读全文