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 条评论
登录 后参与评论

相关文章

来自专栏奔跑的人生

[springboot 开发单体web shop] 2. Mybatis Generator 生成common mapper

我们可以看到一行配置内容:<properties resource="generator/config.properties"/>,这里是为了将我们的数据库连接...

7920
来自专栏Python空间

Python 拓展之详解深拷贝和浅拷贝

在昨天的文章里 (零基础学习 Python 之字典),写字典的方法的时候留了一个小尾巴,那就是 copy() 方法还没讲。一是因为 copy 这个方法比较特殊,...

5720
来自专栏Java帮帮-微信公众号-技术文章全总结

Vue 3 最值得期待的五项重大更新

Vue 团队非常擅长改进框架 API。Evan You 总结了 Vue 3 的几大改进目标:

9950
来自专栏GA小站

5.4、访客行为跟踪

网站上追踪消费者行为的主要是通过页面标签技术,页面标签技术是一种从访客浏览器端收集数据的技术,通常是通过放置在网站中每个页面的javascript代码进行收集的...

9410
来自专栏编程微刊

从零开始学习React-属性绑定(三)

前面两节用的是HBuilder编辑器,很多童鞋说Visual Studio Code很好用,确实如此,因为平时开发用习惯了前者,写教程的时候,为了方便大家体验,...

4420
来自专栏未闻Code

一日一技:炸掉你的内存—— itertools.tee 的缺陷

在上一篇文章中,我们讲到了,使用itertools.tee可以让一个生成器被多次完整遍历:

14520
来自专栏前端劝退师

一文搞懂 Webpack 多入口配置

再一次,在网上找的不少文章都不合我的需求,很多文章都是只简单介绍了生产环境下配置,没有介绍开发环境下的配置,有的也没有将多入口结合 vue-router、 vu...

9020
来自专栏Java那些事

Java中的Object方法详解

Java 中的 Object 方法在面试中是一个非常高频的点,毕竟 Object 是所有类的“老祖宗”。Java 中所有的类都有一个共同的祖先 Object 类...

9630
来自专栏Eureka伽罗的技术时光轴

Kernel to User land: APC injection

When running in Kernel mode, it may be necessary to inject code into a User-land...

8230
来自专栏Java大联盟

Spring Boot+Vue|axios异步请求数据的12种操作(下篇)

上一篇 axios 教程中,我已经为大家详细讲解了 axios 异步请求数据的前 6 种操作方式:Spring Boot+Vue|axios异步请求数据的12种...

12420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励