深入理解 JSX

最后更新于：2022-04-01 20:47:35

[JSX](http://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。 [TOC] ## 为什么要使用 JSX？你不需要为了 React 使用 JSX，可以直接使用纯粹的 JS。但我们更建议使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。对于非专职开发者（比如设计师）同样比较熟悉。 XML 有固定的标签开启和闭合。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。它没有修改 JavaScript 语义。 ## HTML标签与 React组件对比 React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。 ~~~ var myDivElement =

; React.render(myDivElement, document.body); ~~~ 要渲染 React 组件，只需创建一个大写字母开头的本地变量。 ~~~ var MyComponent = React.createClass({/*...*/}); var myElement = ; React.render(myElement, document.body); ~~~ React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。 > 注意: > > 由于 JSX 就是 JavaScript，一些标识符像 `class` 和 `for` 不建议作为 XML 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。 ## 转换 JSX 把类 XML 的语法转成纯粹 JavaScript，XML 元素、属性和子节点被转换成`React.createElement` 的参数。 ~~~ var Nav; // 输入 (JSX): var app =

; // 输出 (JS): var app = React.createElement(Nav, {color:"blue"}); ~~~ 注意，要想使用 ``，`Nav` 变量一定要在作用区间内。 JSX 也支持使用 XML 语法定义子结点： ~~~ var Nav, Profile; // 输入 (JSX): var app = ; // 输出 (JS): var app = React.createElement( Nav, {color:"blue"}, React.createElement(Profile, null, "click") ); ~~~ 使用 [JSX 编译器](http://reactjs.cn/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](http://reactjs.cn/react/html-jsx.html) 来把现有 HTML 转成 JSX。如果你要使用 JSX，这篇 [新手入门](http://reactjs.cn/react/docs/getting-started.html) 教程来教你如何搭建环境。 > 注意: > > JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过`React.createElement` 里的校验代码。 ## JavaScript 表达式 ### 属性表达式要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 (`{}`) 包起来，不要用引号 (`""`)。 ~~~ // 输入 (JSX): var person = ; // 输出 (JS): var person = React.createElement( Person, {name: window.isLoggedIn ? window.name : ''} ); ~~~ ### 子节点表达式同样地，JavaScript 表达式可用于描述子结点： ~~~ // 输入 (JSX): var content = {window.isLoggedIn ?

: }; // 输出 (JS): var content = React.createElement( Container, null, window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login) ); ~~~ ### 注释 JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 `{}` 包围要注释的部分。 ~~~ var content = ( ); ~~~ > 注意: > > JSX 类似于 HTML，但不完全一样。参考 [JSX 陷阱](http://reactjs.cn/react/docs/jsx-gotchas.html) 了解主要不同。