赵走x博客 - 开发者的网上家园

27、JSX 和HTML 的区别

资源编号:76077 书籍 React快速上手开发热度：109

JSX 带给你的感觉应该是非常熟悉的，因为它和HTML 很类似，但JSX 还支持添加动态值、使用循环与条件判断（只需要使用{} 包裹起来）。

JSX 带给你的感觉应该是非常熟悉的，因为它和HTML 很类似，但JSX 还支持添加动态值、使用循环与条件判断（只需要使用{} 包裹起来）。在开始使用JSX 时，你可以使用HTML-to-JSX 工具（https://facebook.github.io/react/html-jsx.html ），但相信你很快就能学会自己编写JSX 了。接下来我们会介绍HTML 和JSX 之间的一些区别，初学者可能会对此感到吃惊。

在第1 章中，我们已经讨论过其中一部分区别了，现在来回顾一下。

# 1、class 和for 属性不能用了吗
你不能在JSX 中使用class 和for 属性（它们都是ECMAScript 中的保留字），需要使用className 和htmlFor 作为代替：
```
// 错误！
var em = ;
var label = <label for="thatInput" />;
// 正确
var em = ;
var label = <label htmlFor="thatInput" />;
```
# 2、style 属性值是一个对象
style 属性接收一个对象值，而不是用分号分隔的字符串。CSS 属性名字使用驼峰命名法，而不是使用破折号分隔。
```
// 错误！
var em = ;
// 正确
var styles = {
fontSize: '2em',
lineHeight: '1.6'
};
var em = ;
// 也可以使用内联样式
// 注意双重花括号的使用{ {} }。外层用于包裹JSX的动态值，而内层则代表一个JS对象
var em = ;
```

# 3、闭合标签
在HTML 中，有一些标签不需要闭合；但在JSX（XML）中，所有标签都要闭合：
```
// 错误！
// 标签没有闭合，虽然在HTML中这样写是合法的
var gimmeabreak = ;
var list = <ul><li>item</ul>;
var meta = <meta charset="utf-8">;
// 正确
var gimmeabreak = ;
var list = <ul><li>item</li></ul>;
var meta = <meta charSet="utf-8" />;
// 正确
var meta = <meta charSet="utf-8"></meta>;
```

# 4、用驼峰法命名属性
在之前的代码片段中，你是否注意到了charset 和charSet 的区别？在JSX 中，所有属性都需要使用驼峰法命名。对于初学者而言，这经常造成混淆——你可能在代码中使用了onclick，但发现它没有达到预期的效果，直到把属性名改为onClick 才能正常工作：
```
// 错误！
var a = <a onclick="reticulateSplines()" />;
// 正确
var a = <a onClick={reticulateSplines} />;
```
需要注意，所有以data- 和aria- 开头的属性都是例外，其命名方式和HTML 相同。