JavaScript的React框架中的JSX语法学习入门教程

前端之家收集整理的这篇文章主要介绍了JavaScript的React框架中的JSX语法学习入门教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是JSX?

在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和组件之间的关系看上去更加清晰。

; React.render(myElement,document.body);

一个XML标签,比如会被JSX转换工具转换成什么呢?

比如:

click;

会被转化为:

那么也就是说,我们写一个XML标签,实质上就是在调用React.createElement这个方法,并返回一个ReactElement对象。

这个方法的第一个参数可以是一个字符串,表示是一个HTML标准内的元素,或者是一个ReactClass类型的对象,表示我们之前封装好的自定义组件。第二个参数是一个对象,或者说是字典也可以,它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。从第三个参数开始,之后的参数都被认作是元素的子元素。

JSX转化器

要把带有JSX语法的代码转化为纯Javascript代码,有多种方式,对于内联与HTML中的代码或者是未经过转化的外部文件,在script标签中要加上type="text/jsx",并引入JSXTransformer.js文件即可,不过这种方式并不建议在生产环境使用,建议的方法是在代码上线前就将代码转换好,可以使用npm全局安装react-tools:

并使用命令行工具转化即可(具体用法可以参考jsx -h):

如果使用自动化工具,比如gulp的话,可以使用相应插件gulp-react。

HTML模板中使用JS

在HTML模板中使用JS非常方便,只需要用大括号把JS代码括起来即可。

React.render(

{ names.map(function (name) { return
Hello,{name}!
}) }
,document.getElementById('example') );

编译出来就变成了这样:

要注意的是,大括号实际就是一个变量输出表达式,JSX最终就是直接把花括号中的内容作为 React.createElement 的第三个参数直接传入了(没有任何修改直接传入),所以其中只能放一行表达式,并且任何不能直接作为第三个参数的写法都是错的,那么你这样写就是错的:

{ var a = 1; names.map(function (name) { return
Hello,document.getElementById('example') );

因为很明显其中花括号内的内容直接放在第三个参数上,语法不对。

这么写也是错的:

{ var a = 1;

}

,document.getElementById('example') );

因为 React.createElement(“div”,var a = 1;) 是语法错误。 那么你也可以理解为什么大括号中的js表达式不能有分号结尾了吧。

需要注意的是,如果你在属性输出JS变量,是不能加引号的,不然会被当做字符串而不被解析。 应该是这样:

链接

使用HTML标签

要创建一个HTML标准中存在的元素,直接像写HTML代码一样即可:

; React.render(myDivElement,document.body);

不过需要注意的是class和for这两个属性,JSX语法最终是要被转换为纯Javascript的,所以要和在Javascript DOM中一样,用className和htmlFor。

还有一点是,在创建HTML标准内的元素时,JSX转化器会丢弃那些非标准的属性,如果一定要添加自定义属性,那么需要在这些自定义属性之前添加data-前缀。

命名空间式组件

比如开发组件的时候,一个组件有多个子组件,你希望这些子组件可以作为其父组件的属性,那么可以像这样用:

var App = (

);

这样你只需将子组件的ReactClass作为其父组件的属性

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

而创建子元素可以直接交给JSX转化器:

功能需要0.11及以上版本

Javascript表达式

在JSX语法中写Javascript表达式只需要用{}即可,比如下面这个使用三目运算符的例子:

{window.isLoggedIn ?

不过要注意的是,JSX语法只是语法糖,它的背后是调用ReactElement的构造方法React.createElement的,所以类似这样的写法是不可以的:

Hello World!

// Is transformed to this JS:
React.createElement("div",{id: if (condition) { 'msg' }},"Hello World!");

可以从转化后的Javascript代码中看出明显的语法错误,所以要不用三目运算符,要不就这样写:

Hello World!
else
Hello World!

传播属性(Spread Attributes)

在JSX中,可以使用...运算符,表示将一个对象的键值对与ReactElement的props属性合并,这个...运算符的实现类似于ES6 Array中的...运算符的特性。

;

这样就相当于:

它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:

; console.log(component.props.foo); // 'override'

猜你在找的JavaScript相关文章