React - jsx

目录

1 1. 什么是JSX语法 2 2. jsx语法示例与渲染的VNode节点 3 3. jsx的渲染流程 4 4. jsx中的js和html的写法不同 5 a. js:{ js语法 } 6 i. 花括号里边一定要返回字符串才能渲染 7 ii. {{ 双花括号表示js语法里的对象格式 }} 8 iii. 花括号里可以写表达式、三元、有返回值且返回字符串的函数调用 9 iv. 花括号里直接放对象报错 10 v. 数组可以直接被渲染到页面中。 11 b. html:<html语法> 12 i. class等关键字不能用做html的属性(如class、for等不行,需要替换成别的) 13 1) class -> className 14 2) for -> htmlFor 15 c. a标签写了以后,必须写href属性 16 d. 组件根节点只能是一个标签,不能有并列标签。否则报错! 17 三种方法实现空白标签包裹:(就像小程序的block标签、又像vue的template标签) 18 i. <React.Fragment>空白标签1</React.Fragment> 19 ii. import { Fragment } from 'react';<Fragment>空白标签1</Fragment> 20 iii. <>空白标签2</> 21 e. 列表渲染 - 迭代的方法(没有for):利用数组进行渲染 22 f. key值唯一的绑定 23 g. 条件切换的使用(没有if else、简直反人类) 24 h. 动态样式的绑定 - style的值需要是一个js语法,包裹在对象里边。 25 i. v-html类似用法:dangerouslySetInnerHTML={ {__html: variableName} }【innerHTML容易造成xss攻击,避免使用】 26 j. jsx中的注释 27 i. 多行注释:{ /** js注释 **/ } 28 ii. 单行注释: 29 { 30 // 单行注释,花括号如果提上来就被注释了。所以换行 31 }

什么是JSX?

JSX就是在js中写html代码。写在js里边的html标签就是JSJSX语法,JS+HTML或JS+XML的组合。需要react来解析。就必须引入React组件。

JSX语法:

JSX语法就是React.createElement函数的语法糖。

JSX会利用babel进行转化,转化成React.createElement函数。

JSX语法有一个返回值,返回一个虚拟的节点VNode对象,该对象用来描述当前编译的元素。

JSX语法示例:

let App = <div id="gjf" className="xing_org1^">
<h3 className="love_china">此生无悔入华夏,来世还生中华家!</h3>
祖国母亲生日快乐!
</div>

对应生成的React.createElement函数

let App = React.createElement('div', {
id: 'gjf',
className: 'xing_org1^'
}, React.createElement('h3', {
className: 'love_china'
}, '此生无悔入华夏,来世还生中华家!'), '祖国母亲生日快乐!')

对应生成的VNode节点对象:

渲染流程

JSX

-> React.createElement(type,props,chidrens...)

-> vNode对象(描述当前元素)

-> 渲染到页面上

JSX组件根节点只能是一个标签

不能有并列标签,否则报错如下:

解决方案有三种:

React.Fragment标签

解构上边那个标签:{ Fragment }:

空白标签<></>:

style动态样式的绑定

改成下边这样:

另一个示例:

<div>

<h3 style="border-bottom: 1px solid #999;">试试JSX里的js语法,花括号里都可以写啥</h3>

</div>

报错如下:

The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

in h3 (at baiduSearch.js:41) in div (at baiduSearch.js:40) in App (at src/index.js:6)

期待一个map对象,而不是一个字符串。

修改如下:

<div>

<h3 style={ {borderBottom: '1px solid #999', paddingBottom: '10px'} }>试试JSX里的js语法,花括号里都可以写啥</h3>

</div>

JSX的花括号里可以写:

可以写:表达式、三元表达式、字符串、函数调用(必须有返回值)

<div style={ {padding: '20px', background: "#efe" } }>

<h3 style={ {borderBottom: '1px solid #999', paddingBottom: '10px'} }>试试JSX里的js语法,花括号里都可以写啥</h3>

<p>

字符串:{ '一个字符串' }

</p>

<p>

表达式:{ 1 + 1 }

</p>

<p>

三元表达式:{ true ? '加油郭菊锋!' : '加油小石头!' }

</p>

<p>

函数调用:{ test() }

</p>

<p>

函数调用 - 也可以返回表达式 - { test1() }

</p>

<p> 函数调用 - 没有返回值时:{ test2()} </p>

</div>

function test(){

return "必须返回的是字符串?"

}

function test1(){

return 2 + 2

}

function test2(){

var mySelf = "我没有返回值";

// return 2 + 2

}

如果里边放一个对象直接渲染,就会报错:

<p>非要渲染一个对象:{{a: 1}}</p>

对象作为react的子元素是不合法的。如果您打算呈现一组子元素,那么可以使用数组。

解决方法:把对象用JSON.stringify()格式化。

数组可以直接被渲染到页面中。

<p>可以渲染数组:{ [1,2,<a href="http://www.jd.com" target="_blank">数组里的标签</a>] }</p>

或者:

html语法

class等关键字不能用做html的属性。否则报错:

<h4>搜索热点 <span class="change">换一换</span></h4>

报的警告,虽然没啥问题,但就是看着不爽

列表渲染 - 迭代的方法(没有for)

小程序的wx:for,vue的v-for, react里边就没有for的api接口。

react的特点就是API比较少。可以利用数组进行渲染。

数组可以直接渲染到js的大括号中,数组的各项还能添加标签。所以数组就可以用来批量渲染列表:

在js的花括号里,既要遍历数组,又要有返回值。所以用到数组的map方法

核心思想如上,列表渲染应用的代码如下:

对于上边不知道怎么给li加不同的类名的问题,处理方式如下:

列表渲染时,需要设置唯一key,否则报错

key应该是唯一的,不要用map循环的i。否则之前只是挪动dom的位置,之后就会需要全部删了重新生成dom

源代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6-Babel编译环境搭建

    里边的一个核心功能就是transform,把js代码编程抽象语法树AST。只要变成抽象语法树后,后期的插件才能根据这个抽象语法树进行降级,转成es5。

    xing.org1^
  • vuex - 项目结构目录及一些简单配置

    xing.org1^
  • JS-高程3(更新中...)

    xing.org1^
  • node.js的模块化及reqire与exports释义

    模块化是node.js的核心概念,node.js对于服务端的操作都是封装成一个个独立的核心模块,以文件读写模块File System为例:

    章鱼喵
  • 快速学习ReactJS-搭建环境

    在UmiJS的约定中,config/config.js将作为UmiJS的全局配置文件。

    cwl_java
  • 详解 Vue 目录及配置文件之 config 目录

    Demo_Null
  • 【技术分享】Detectron模型性能优化与部署(1)

    随着深度学习的应用场景不断拓展,应用规模的不断扩大,模型推理服务的性能也受到越来越多重视。同样一个模型在同样的硬件上,专业的模型优化在同样的推理精度下可能会带来...

    腾讯智能钛AI开发者
  • 伍斯特理工学院:如何塑造机器人的未来?

    成立于1865年的伍斯特理工学院(WPI)是美国历史最悠久的工程技术大学之一。WPI的著名校友包括的技术发明家Robert Goddard(液体火箭发明者)和D...

    机器人网
  • 如何学习用Typescript写Reactjs?

    首先扫盲一下,先从搭建环境开始: 1.安装node,因为ts的编译器是js/ts写的; 安装node后同时获得npm命令,这是nodejs世界里的包管理器...

    前朝楚水
  • 简易--go语言redis连接池

    package Redis_DB import ( "github.com.Go-Redis/github.com/alphazero/Go-R...

    李海彬

扫码关注云+社区

领取腾讯云代金券