qq20004604的博客

技术为需求为服务,技术才能更好的发展

排序:
默认
按更新时间
按访问量

聊聊React的一些玩法(下:九步玩转React容器组件与展示组件)

3、实战容器组件和展示组件的玩法 如果学过 redux 的话,会知道, redux 的思想是容器组件和展示组件分离,容器组件存数据,展示组件秀样式。 但是光看不练,恐怕很难理解这种玩法。 我在这里,不使用 Redux,而是使用原生的 React,一步一步带着做一个带【两级产品信息(订单级与商...

2018-03-26 00:24:39

阅读数:281

评论数:0

聊聊React的一些玩法(上:工具篇)

1、简化写法 我们在写 React 组件时,参考官方文档写法,一要声明 state,二要绑定函数的 this,常规写法如下: class DEMO extends React.Component { constructor() { super(); ...

2018-03-25 00:47:45

阅读数:147

评论数:1

React-router(11)路由配置

11、路由配置 DEMO地址 参考 9.routeConfigTable.js 简单来说,就是有一个对象,如下: const RouteConfig = [ { path: 'first', component: First, ...

2018-03-04 22:44:09

阅读数:277

评论数:0

React-router(10)登录拦截

10、登录拦截 DEMO地址 参考 8.needLogin.js 登录拦截说起来比较高大上,其实很简单。 需要组件: 登录功能组件; 受保护组件(需要登录后才能访问); 受保护组件的父组件(可选,如果 1 和 2 不是同一个路径,则需要,否则可以不需要)(用于进入受保护组件之前...

2018-03-04 22:43:28

阅读数:1083

评论数:0

React-router(9)重定向

9、重定向 DEMO地址 参考 7.redirect.js 重定向有两种方式,第一种是通过 <Redirect> 标签实现,第二种是通过编程式导航方式实现。 【<Redirect> 标签】 ...

2018-03-04 22:42:52

阅读数:364

评论数:0

React-router(8)Link 标签 to 属性为对象时(路由信息传值)

8、Link 标签 to 属性为对象时(路由信息传值) DEMO地址 参考 6.routeInfo.js 在组件里,每个组件的路由数据,都是各自独立的。 在之前分析中,已知: match 属性的值,存储的是该 Route 标签的路由; location 属性的值,其中 url ...

2018-03-04 22:42:13

阅读数:250

评论数:0

React-router(7)path 和 url 的区别

7、path 和 url 的区别 在 match 属性中,有 path 和 url 属性,大部分时间他们是一样的,那么区别是什么呢? 假如路由匹配路径是 /Params/2/:myParams,实际跳转路径是 /Params/2/1(此时匹配成功)。 那么; url:/Params/2/...

2018-03-04 22:20:30

阅读数:131

评论数:0

React-router(6)父组件传 【值】 or 【函数】 给子组件

6、父组件传 【值】 or 【函数】 给子组件 DEMO地址 参考 5.fromParentComponent.js 如果你已经熟悉了前面的内容,会知道以下结论: 路由传参是通过 props 传参的; 子组件,是写在 Route 标签的 component 属性中的; 通过 Ro...

2018-03-04 22:19:56

阅读数:252

评论数:17

React-router(5)params 路由传参

5、参数 DEMO地址 参考 4.params.js React路由取参数,有两种: ?a=1 :这种属于 search 字符串,在 location.search 里取值; /a/123 :这种需要从 match.params里取值; 但无论哪种,路由获取到的值,是跳转后的...

2018-03-04 22:19:11

阅读数:858

评论数:0

React-router(4)props 路由信息

4、props DEMO地址 参考 3.props.js react-router 的路由信息,都存储在组件的 props 里。 之所以是存在 props 里,是因为我们写在父组件里的,是 Route 标签,我们需要显示的组件,是作为 Route 标签的属性而传进去的。 显然,而...

2018-03-04 22:18:20

阅读数:450

评论数:0

React-router(3)BrowserRouter 和 HashRouter(哈希地址和普通地址)

3、BrowserRouter 和 HashRouter 前两节的DEMO,都是 HashRouter,而非 BrowserRouter ,二者有所不同。 以下解释的前提是你要懂什么叫 hash 地址,hash 地址就是指 # 号后面的 url。 假如有一个 Link 标签,点击后跳转到 /...

2018-03-04 22:10:04

阅读数:733

评论数:0

React-router(2)路由嵌套

2、路由嵌套: 参考 2.routingNested.js DEMO地址 还是以上一节上面那个 DEMO 为示例。 毫无疑问,我们肯定会面临路由嵌套的问题,即在顶级路由匹配到组件后,子组件里面也可能有一个次级路由。 假如顶级路由的url为:/1,那么次级路由匹配后的路径一...

2018-03-04 22:03:49

阅读数:277

评论数:0

React-router(1)基础用法

0、参考文献 React Router 4 简易入门 一个中文文档,但不确定是否是官方的,例子比较多 初探 React Router 4.0 这个对标签的说明比较详细 react-router v4 如何静态传值给子组件 render和component的区别 0.1、React-ro...

2018-03-04 22:01:49

阅读数:178

评论数:0

React(17)异步组件

26、异步组件 当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现; React 里如何使用异步加载的这个模块:参考正常使用模块时的做法; 【异步加载】 关于 ...

2018-02-12 18:21:54

阅读数:576

评论数:0

React(16)包裹标签 React.Fragment

24、包裹标签 React.Fragment 在 Vue 里,我们会用 <template></template> 标签来包裹一些不能有父容器的复数同级标签。 例如在 <tbody&a...

2018-02-12 18:20:58

阅读数:1144

评论数:0

React(15)ref

23、ref 用过 Vue 的同学,在使用 React 的 ref 时,注意不要混淆。 在 Vue 中,ref 绑定的 DOM 元素,可以直接在组件实例里,通过 this.$refs.xxx 来获取。 但是在 React 中,ref 的属性的值,是一个函数; 函数的参数是当前 DOM 标签...

2018-02-12 18:20:29

阅读数:126

评论数:0

React(14)JSX 的一些语法说明

22、JSX 【1】标签名可以是对象的属性(前提对象属性是一个组件) 这种情况下,对象和属性的首字母,可以不大写(但 建议大写 ,以作区分) let MyDom = { my() { return <p>这是一行&...

2018-02-12 18:19:53

阅读数:93

评论数:0

React(13)style 和 class

20、style 写法 JSX里,写 style 属性,有几点需要注意: 以 k-v (对象)形式来写 style 属性(如果直接写在 html 标签里,容易以为是双大括号,事实上还是单大括号); key 使用驼峰写法; 值是字符串; 如果想混合多个属性,需要先通过例如 Object.ass...

2018-02-12 18:19:19

阅读数:132

评论数:0

React(12)组合(类似 Vue 组件的插槽)和继承

18、组合(类似 Vue 组件的插槽) 在Vue中,假如我们需要让子组件的一部分内容,被父组件控制,而不是被子组件控制,那么我们会采用插槽的写法 <slot></slot> 在 React 里也有类似的写...

2018-02-12 18:18:47

阅读数:210

评论数:0

React(11)组件通信

17、组件通信 这个很好理解,我们开发常面对几种情况: 子组件 需要使用 父组件 的值:通过标签传入,props取值,如:<Status temperaature={this.state.temperaature}></Sta...

2018-02-12 18:18:10

阅读数:114

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭