美文网首页待学习
React入门:关于JSX语法一

React入门:关于JSX语法一

作者: 星空梦想 | 来源:发表于2016-04-13 15:07 被阅读104次

    借鉴:原著

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

    看代码:

    插图

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

    查看API:链接

    插图2

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

    转化

    React JSX将类似XML的语法转化到原生的JavaScript,元素的标签、属性和子元素都会被当作参数传给React.createElement方法:

    插图3

    JSX转化器

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

    插图4

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

    插图5

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

    查看;链接


    HTML 标签 vs. React 组件

    React.render方法可以渲染HTML结构,也可以渲染React组件。

    渲染HTML标签,声明变量采用首字母小写

    渲染React组件,声明变量采用首字母大写

    React 的 JSX 使用大写和小写字母来区分本地的组件类和 HTML 标签.

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

    插图7

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

    命名空间式组件

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

    插图

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

    插图12

    相关文章

      网友评论

        本文标题:React入门:关于JSX语法一

        本文链接:https://www.haomeiwen.com/subject/vcowlttx.html