当前位置: > > > React - JSX语法详解(附样例)

React - JSX语法详解(附样例)

在前文中:React - 功能介绍、安装配置说明(附几个简单的入门样例),我演示了如何使用 ReactJS 进行页面开发。本文来着重介绍下 JSX。虽然 React 不强制我们一定要用 JSX,只用 JavaScript 也可以。但使用 JSX 可以让我们开发更加高效,代码更加简洁。

JSX JavaScript XML,是一种在 React 组件内部构建标签的类 XML 语法。
JSX 并不是一门新的语言,仅仅是个语法糖(syntactic sugar),允许开发者在 JavaScript 中书写 HTML 语法。最后,每个 HTML 标签都转化为 JavaScript 代码来运行。
这样对于使用 JavaScript 来构建组件以及组件之间关系的应用,在代码层面显得更加清晰。而不再像过于一样用 JavsScript 操作 DOM 来创建组件以及组件之间的嵌套关系。

1,运行环境

  • JSX 必须借助 ReactJS 环境才能运行,所以使用前要先加载 ReactJS 文件(react.jsreact-dom.js
  • 除了 ReactJS 环境,还需要加载 JSX 的解析器(browser.js
具体的下载地址和加载方法,参考我之前的文章:React - 功能介绍、安装配置说明(附几个简单的入门样例)

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- 开头的自定义属性,页面渲染后则不显示。
比如我们使用 JSX 书写如下代码:
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')
);
评论0