React 初学者教程 7：深入 JSX - 众成翻译
你可能已经注意到，在前面的教程中我们用到很多 JSX。但是我们确实还没有认真看看 JSX 到底是什么。它实际上是如何工作的呢？为什么我们不就把它叫 HTML 呢？它到底有哪些怪癖？在本教程中，我们将回答所有这些问题。我们将做一些严肃的回溯（以及一些前溯），来深入看看为了探险，我们需要知道有关的 JSX 的什么。
一、JSX 背后发生了什么？
我们已经掩盖的最大的事情之一，是试图推断在编写完 JSX 后，JSX 发生了什么。它是如何最后在浏览器中变成 HTML 的？看看如下示例，在这里我们定义了一个 Card 组件：
var Card = React.createClass({
render: function() {
var cardStyle = {
height: 200,
width: 150,
padding: 0,
backgroundColor: &#FFF&,
WebkitFilter: &drop-shadow(0px 0px 5px #666)&,
filter: &drop-shadow(0px 0px 5px #666)&
&div style={cardStyle}&
&Square color={this.props.color}/&
&Label color={this.props.color}/&
这里面 JSX 是如下的四行：
&div style={cardStyle}&
&Square color={this.props.color}/&
&Label color={this.props.color}/&
要记住的是浏览器是不知道如何处理 JSX的，所以我们得用 Babel 把 JSX 转换成浏览器可以理解的 JavaScript。
也就是说，我们写 JSX 只是为人类眼球来写的。当这个 JSX 到了浏览器中时，最终会被转换为纯 JavaScript：
return React.createElement(
{ style: cardStyle },
React.createElement(Square, { color: this.props.color }),
React.createElement(Label, { color: this.props.color })
所有这些整齐嵌套的像 HTML 的元素、它们的属性、它们的子元素都会变成一系列带有默认初始化值的 createElement 调用。这里是 Card 组件变成 JavaScript 时的完整代码：
var Card = React.createClass({
displayName: &Card&,
render: function render() {
var cardStyle = {
height: 200,
width: 150,
padding: 0,
backgroundColor: &#FFF&,
WebkitFilter: &drop-shadow(0px 0px 5px #666)&,
filter: &drop-shadow(0px 0px 5px #666)&
return React.createElement(
{ style: cardStyle },
React.createElement(Square, { color: this.props.color }),
React.createElement(Label, { color: this.props.color })
可以看到这里完全没有 JSX 的痕迹！在我们写的代码和浏览器看到的代码之间的所有变化，是我们在《创建第一个 React 应用》教程中讨论的转译步骤的一部分。这种转译完全发生在幕后，由 Babel 完全在浏览器中执行 JSX -& JS 的转换。我们最终会考虑用 Babel 作为构建环境的一部分，这样我们将只生成一个转换了的 JS 文件。
是的，到了这里你已经有了一个所有 JSX 发生了什么的答案：被转变成 JavaScript。
二、要记住的 JSX 怪癖
我们已经用了 JSX，可能你已经注意到我们遇到一些能做什么和不能做什么的随意的规则和异常。在本节，我们把所有这些怪癖放在一起，甚至会遇到一些全新的。
1. 只能返回一个根节点
这可能是我们遇到的第一个怪癖。在 JSX 中，return 或者 render 的东西不能由多个根元素组成：
ReactDOM.render(
&Letter&B&/Letter&
&Letter&E&/Letter&
&Letter&I&/Letter&
&Letter&O&/Letter&
&Letter&U&/Letter&,
document.querySelector(&#container&)
如果你想像这样做点什么，那么你需要先将所有元素用一个父元素包起来：
ReactDOM.render(
&Letter&A&/Letter&
&Letter&E&/Letter&
&Letter&I&/Letter&
&Letter&O&/Letter&
&Letter&U&/Letter&
document.querySelector(&#container&)
之前我们看到这个时，这看起来像一个古怪的需求，但是你可以把这事怪到 createElement 头上去。当使用 render 和 return 函数时，最终返回的是单个 createElement 调用（这个 createElement 可能会有很多嵌套的 createElement 调用）。如下是上面的 JSX 转换为 JavaScript 后的代码：
ReactDOM.render(React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
React.createElement(
), document.querySelector(&#container&));
如果是有多个根元素，就会破坏函数返回值以及 createElement 的机制，所以这就是为什么只能指定一个返回一个根元素的原因。
2. 不能指定 inline CSS
在《React 中的样式》教程中，我们已经看到，JSX 中的 style 属性与 HTML 中的 style 属性起的作用是不同的。在 HTML 中，你可以直接在 HTML 元素的 style 属性上设定 CSS 属性：
&div style=&font-family:Afont-size:24px&&
&p&Blah!&/p&
在 JSX 中，style 属性不能包含 CSS，而是引用一个包含样式信息的对象：
var Letter = React.createClass({
render: function() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: this.props.bgcolor,
color: &#333&,
display: &inline-block&,
fontFamily: &monospace&,
fontSize: &32&,
textAlign: &center&
&div style={letterStyle}&
{this.props.children}
可以看到我们有一个 letterStyle 对象，该对象包含所有的 CSS 属性（按驼峰命名法则命名的 JavaScript 形式）及其值。该对象就是我们指定给 style 属性的对象。
3. 保留关键字和 className
JavaScript 有很多不能用作标识符（即变量和属性名）的关键字和值。这些关键字包括：break, case, class, catch, const, continue, debugger, default, delete, do, else, export, extends, finally, for, function, if, import, in, instanceof, new, return, super, switch, this, throw, try, typeof, var, void, while, with, yield。
当我们在编写 JSX 时，也必须注意不要用这些关键字作为标识符。这有点困难，某些很流行的关键字，比如 class，在 HTML 中很常用，但是也在 JavaScript 的保留关键字列表中。
我们来看如下代码：
ReactDOM.render(
&div class=&slideIn&&
&p class=&emphasis&&Gabagool!&/p&
document.querySelector(&#container&)
无视 JavaScript 的保留关键字 class（就像上面代码中一样）是不行的。你需要做的是用 DOM API 版本的 class 属性 className 来代替：
ReactDOM.render(
&div className=&slideIn&&
&p className=&emphasis&&Gabagool!&/p&
document.querySelector(&#container&)
你可以在看到支持的属性的完整列表，并且可以看到所有属性都是遵循驼峰命名法则。这个细节是重要的，因为用小写版本的属性行不通。如果你粘贴了一大块想让 JSX 处理的 HTML 代码，必须确保回到你粘贴的 HTML，做出这些小的调整，以将其变成有效的 JSX。
这带来另一个点。因为这些与 HTML 行为的细小偏差，我们趋向于说 JSX 支持 HTML 类似的语法，而不是就说 JSX 支持 HTML。这是深思熟虑的 React 主义。对JSX 和 HTML 之间的关系的最清晰的回答来自于 React 团队成员，Ben Alpert，他在 Quora 中这样回答：
…我们的想法是 JSX 的主要优点是 匹配关闭标记的对称性让代码更容易读懂，而不是直接与 HTML 或者 XML 相似。直接复制/粘贴 HTML 很方便，但是其它
It's convenient to copy/paste HTML directly, but other minor differences (in self-closing tags, for example) make this a losing battle and we have a HTML to JSX converter to help you anyway. 最后，要将 HTML 翻译为通顺的 React 代码，相当大的工作量通常是将标记打碎为有意义的组件，所以将 class 变为 className 只是工作量中的一个小部分。
就像在 HTML、CSS 和 JavaScript 中写注释是一个好主意一样，在 JSX 内提供注释也是个好主意。在 JSX 中指定注释与在 JavaScript 写注释很相似，只有一个例外。如果你指定一个注释作为一个标记的子节点，那么你必须用 { 和 } 把注释包起来，以确保它被解析为一个表达式：
ReactDOM.render(
&div class=&slideIn&&
&p class=&emphasis&&Gabagool!&/p&
{/* I am a child comment */}
document.querySelector(&#container&)
本例中的注释是 div 元素的一个子元素。如果完全在一个标记内部指定注释，那么就不需要用大括号把单行或者多行注释括起来：
ReactDOM.render(
&div class=&slideIn&&
&p class=&emphasis&&Gabagool!&/p&
/* This comment
goes across
multiple lines */
className=&colorCard& // end of line
document.querySelector(&#container&)
5. 大小写、HTML 元素和组件
大小写很重要。要表示 HTML 元素，必须确保 HTML 标记是小写字母：
ReactDOM.render(
&p&Something goes here!&/p&
&/section&
document.querySelector(&#container&)
当表示组件时，组件的名称必须是大写：
ReactDOM.render(
&MyCustomComponent/&
document.querySelector(&#container&)
如果大小写出错，React 将不会正确渲染内容。当代码运行不正确时，大小写问题可能是你想到的最后的事情，所以记住这个小技巧。
6. JSX 可以出现在任何地方
在很多情况下，JSX 并不是像我们前面看到的示例一样，整齐地排列在一个 render 或者 return 函数内。看看如下示例：
var swatchComponent = &Swatch color=&#2F004F&&&/Swatch&;
ReactDOM.render(
{swatchComponent}
document.querySelector(&#container&)
我们有一个 swatchComponent 变量，该变量被初始化为一行 JSX。当 swatchComponent 变量放在 render 函数内时，Swatch 组件就被初始化。这一切都是有效的，并且在将来当我们学习如何用 JavaScript 生成和操作 JSX 时，我们将会做更多这种事情。
通过本教程，我们最终将前面教程引入的各种 JSX 信息综合到一个地方。要记住的最重要的事情是 JSX 不是 HTML。
在很多常见的场景下， JSX 看起来像 HTML，行为也像 HTML。但是，它最终是被设计为翻译成 JavaScript。这意味着我们可以用普通 HTML 不能想像的方式干活。能够计算表达式或者编程操作整个 JSX 块只是开端。在后面的教程中，我们将更深入探讨这种 JavaScript 和 JSX 的交叉。
文章内容对你有帮助吗？
不确定有没有帮助
非常有帮助
你觉得译者翻译得如何？
非常感谢！您的评价已成功提交。React 入门实例教程_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
React 入门实例教程
|0|0|文档简介
项目管理，技术顾问|
总评分4.0|
浏览量84115
&&React 入门实例教程
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩9页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢966,690 六月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
React支持了ES6 Classes，听听他们怎么说
React支持了ES6 Classes，听听他们怎么说
日. 估计阅读时间:
不到一分钟
智能化运维、Serverless、DevOps......2017年有哪些最新运维技术趋势？!
Author Contacted
相关厂商内容
相关赞助商
CNUTCon全球运维技术大会，9月10日-9月11日，上海&光大会展中心大酒店，
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。23310人阅读
javascript（4）
&&& React中style的使用和直接在HTML中使用有些不同，第一，React中必须是style=&opacity:{this.state.opacity};&这种写法，第二如果多个style&#26684;式如下，多个style中间使用逗号分割
var divStyle = {
color: 'white',
backgroundImage: 'url(' &#43; imgUrl &#43; ')',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
但是在html中我们通常直接使用，多个style中间使用分号;
&&& &div& style=&backgroundColor:#FFFF90; color:#FFFFFF&&white text2&/div&
&&& &!-- div标签内使用style属性设置字体颜色 --&
&& & &span& style=&backgroundColor:#FFFF90& &&a style=&color:#FF00FF&& href=&& &nihao&/a& &/span&
代码示例给出一个表&#26684;中文本的颜色和文本框背景颜色的示例：
&/pre&&pre name=&code& class=&html&&&!DOCTYPE html&
&meta charset=&utf-8&&
&script src=&../build/react.js&&&/script&
&script src=&../build/JSXTransformer.js&&&/script&
&script src=&../build/react-bootstrap/react-bootstrap.min.js& type=&text/javascript&&&/script&
&link rel=&stylesheet& href=&../build/bootstrap/css/bootstrap.min.css&&
&div id=&example&&&/div&
&script type=&text/jsx&&
var Table = ReactBootstrap.T
var TableDemo =
React.createClass({
render: function() {
var textColor = &#CC0000&;
var bgColor = &#00CC00&;
&Table striped bordered condensed hover&
&th&ID&/th&
&th&First Name&/th&
&th&Last Name&/th&
&th&Username&/th&
&td style={{color: textColor}}&1textColor&/td&
&td style={{color: textColor,backgroundColor:&#39;#00CC00&#39;}}&MarkColorAndbgColor&/td&
&td style={{backgroundColor:bgColor}}&OttobgColor&/td&
&td&&a href=&& style={{color: &#39;#CC0000&#39;}}&HrefColor&/a&&/td&
&td&2&/td&
&td&Jacob&/td&
&td style={{backgroundColor:&#39;#00CC00&#39;}} & &a href=&& style={{color: &#39;#CC0000&#39;}}&HrefColorAndbgColor&/a& &/td&
&td&NameFull2&/td&
&td&3&/td&
&td colSpan=&2&&Larry the Bird3Column&/td&
&td&@twitter&/td&
React.render(&TableDemo/&, document.body);
最终效果图如下：
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：475019次
积分：5296
积分：5296
排名：第4924名
原创：115篇
转载：42篇
评论：26条
(1)(1)(1)(1)(2)(3)(1)(4)(2)(1)(2)(1)(2)(3)(2)(1)(3)(1)(1)(2)(1)(1)(7)(14)(2)(5)(3)(1)(1)(1)(1)(3)(2)(1)(2)(3)(1)(1)(2)(3)(3)(3)(6)(7)(3)(15)(27)(8)(1)