React - JSX语法详解(附样例)
在前文中:React - 功能介绍、安装配置说明(附几个简单的入门样例),我演示了如何使用 ReactJS 进行页面开发。本文来着重介绍下 JSX。虽然 React 不强制我们一定要用 JSX,只用 JavaScript 也可以。但使用 JSX 可以让我们开发更加高效,代码更加简洁。
JSX 即 JavaScript XML,是一种在 React 组件内部构建标签的类 XML 语法。
具体的下载地址和加载方法,参考我之前的文章:React - 功能介绍、安装配置说明(附几个简单的入门样例)
(2)外联方式载入
即将 JSX 代码单独放在一个.jsx 文件中。
注意:ReactJS 中约定自定义的组件标签首字母一定要大写,这样便于区分是组件标签还是 HTML 标签。
当然我们不使用 JSX,而是直接通过 React.createElement 方法来创建 ReactElement 对象也是可以的。React.createElement 方法中各个参数的含义如下:
比如下面我们先定义一个变量,再在 JSX 中调用该变量:
在 JSX 中,注释的使用和 JavaScript 是一样的,也分为单行注释和多行注释。
比如我们使用 JSX 书写如下代码:
(2)bind 方法第一个参数是用来设置作用域的。如果要给绑定的事件传递参数,可以从 bind 方法第二个参数起放置我们需要传递的参数。
JSX 即 JavaScript XML,是一种在 React 组件内部构建标签的类 XML 语法。
JSX 并不是一门新的语言,仅仅是个语法糖(syntactic sugar),允许开发者在 JavaScript 中书写 HTML 语法。最后,每个 HTML 标签都转化为 JavaScript 代码来运行。
这样对于使用 JavaScript 来构建组件以及组件之间关系的应用,在代码层面显得更加清晰。而不再像过于一样用 JavsScript 操作 DOM 来创建组件以及组件之间的嵌套关系。
1,运行环境
- JSX 必须借助 ReactJS 环境才能运行,所以使用前要先加载 ReactJS 文件(react.js、react-dom.js)
- 除了 ReactJS 环境,还需要加载 JSX 的解析器(browser.js)
2,载入方式
JSX 目前有两种方法载入。
(1)内联方式载入
<script type="text/babel"> ReactDOM.render( <h1>hello hangge.com</h1>, document.getElementById('example') ); </script>
(2)外联方式载入
即将 JSX 代码单独放在一个.jsx 文件中。
ReactDOM.render( <h1>hello hangge.com</h1>, document.getElementById('example') );然后在页面上通过下面的方式引入这个 .jsx 文件。
<script type="text/babel" src="hello.jsx"></script>
3,标签的使用
我们除了可以在 JavaScript 中书写 HTML 标签外(不需要像以前那样做为字符串用引号引起来)。
还可以使用那些由 ReactJS 创建的组件类标签。
var Hello = React.createClass({ render: function() { return <div>欢迎</div>; } }); ReactDOM.render( <Hello />, document.getElementById('example') );比如上面的代码中,我们创建了一个叫 Hello 的组件,此时我们就可以像使用 HTML 标签一样,通过 <Hello/> 的方式把它引入进来。
注意:ReactJS 中约定自定义的组件标签首字母一定要大写,这样便于区分是组件标签还是 HTML 标签。
4,代码转换
使用 JSX 的书写是为了让我们能更直观地看到组件的 DOM 结果,其最终还是通过解析器转化为 JavaScript 代码才能在浏览器端执行。
比如我们写了如下一段代码:
var msg = <h1 width="10px">hello hangge.com</h1>;那么解析器就会转化为:
var msg = React.createElement("h1", {width: "10px"}, "hello hangge.com");也就是说我们每写一个标签,就相当于调用一次 React.createElement 方法并最后返回一个 ReactElement 对象给我们。
当然我们不使用 JSX,而是直接通过 React.createElement 方法来创建 ReactElement 对象也是可以的。React.createElement 方法中各个参数的含义如下:
- 第一个参数:可以是一个字符串,表示一个标准的 HTML 元素。或者是一个 ReactClass 类型的对象,表示我们之前封装好的自定义组件。
- 第二个参数:是一个对象(字典)。它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。
- 从第三个参数开始:都被认作是该元素的子元素。
5,执行JavaScript表达式
在 JSX 中运行 JavaScript 表达式,需要将表达式用 {} 括起来。比如下面我们先定义一个变量,再在 JSX 中调用该变量:
var str = "欢迎访问hangge.com"; var msg = <h1>{str}</h1>;
6,注释
在 JSX 中,注释的使用和 JavaScript 是一样的,也分为单行注释和多行注释。
var str = "欢迎访问hangge.com"; //<h1>{str}</h1> /** <h1>{str}</h1> **/
7,支持ES6功能
在 JSX 中,我们完全可以使用 ES6 的语法。因为强大的解析器会自动对不支持 ES6 语法的浏览器做降级处理。比如下面样例,我们使用了 ES6 中的一个新语法“...”,其作用是遍历对象的。var props = {}; props.key1 = "1"; props.key2 = "2"; <h1 {...props} key1="3">hangge.com</h1>上面执行后,h1 元素会有两属性:key1="3"、key2="2"。(key1 本来是 1,但被后面定义的属性给覆盖变成 3)
8,自定义属性
除了标签特有的属性外,我们也可以自定义一些属性。但这些自定义属性在真正的页面渲染后,是否会显示在页面上由如下规则决定:- 凡是以 data- 开头的自定义属性,在页面渲染后均可以显示在页面上。
- 非 data- 开头的自定义属性,页面渲染后则不显示。
var msg = <h1 height="50" data-test1="test1" test2="test2">hangge</h1>最后渲染在页面上的结果如下。可以看到只有以 data- 开头的自定义属性被渲染到页面上,其他自定义属性则被忽略掉。
9,显示HTML字符串
有时候我们需要显示一段 HTML 字符串,而不是 HTML 节点。可以这么写。<div>{'<h1>这个是html字符串</h1>'}</div>
10,样式的使用
(1)JSX 中的样式是通过 style 属性定义的。和传统 Web 定义不同的是,它不再是一个字符串而是一个 JavaScript 对象。
比如下面样例,第一个大括号表示是 JSX 语法,第二个大括号是 JavaScript 对象。
<div style={{color:'#ff00ff', fontSize: '20px'}}>欢迎访问hangge.com</div>(2)对于属性名要转为驼峰命名格式,如果不想转的话,则需要加引号括起来。比如:'font-size':'20px'
(3)也可以通过 className='xxx' 的方式引入样式。(切记是 className 而不是 class)
11,事件绑定
(1)下面我们通过 JSX 创建一个按钮,并绑定点击事件。点击后,弹出个提示框。效果图如下:
代码如下。JSX 支持所有的 HTML 元素的事件。但要注意的是,事件名称一定要用驼峰命名方式,如果将 onClick 改成 onclick 就不起作用了。
<div id="example"></div> <script type="text/babel"> function testClick() { alert("点击了按钮!"); } var app = <button onClick={testClick.bind(this)} style={{fontSize: '28px'}}> 按钮 </button> ReactDOM.render( app, document.getElementById('example') ); </script>
(2)bind 方法第一个参数是用来设置作用域的。如果要给绑定的事件传递参数,可以从 bind 方法第二个参数起放置我们需要传递的参数。
function testClick(value) { alert(value); } var app = <button onClick={testClick.bind(this,'我是参数')} style={{fontSize: '28px'}}> 按钮 </button> ReactDOM.render( app, document.getElementById('example') );