美文网首页
React 知识点小结(三):传参及路由

React 知识点小结(三):传参及路由

作者: 二季猫Hsu | 来源:发表于2019-03-03 13:16 被阅读0次

方法绑定

不带参数:

onClick={this.方法名}

带参数:

onClick={()=>this.方法名(参数)}

子到父的传参

在父组件创建方法,这个方法用来改变父组件的值
把这个方法通过属性传递给子
在子组件中通过属性获得这个方法并调用

有状态组件和无状态组件

class都是有状态组件state,有this对象
无状态组件:无state,无this对象,只有props参数。
本质是一个箭头函数

路由

react-router

路由的两种模式:

BrowserRouter 相当于 Vue的history模式
HashRouter 相当于Vue的hash模式
{ match }本质上是从this.props中解构出来的

路由的动态路由传参

配置路由:

<Route path="/路径/:变量名" component={组件} />

标签跳转:

<Link to="/路径/xxxx" >

编程式跳转:

this.props.history.push("/路径/xxxx")

接收参数:

this.props.match.params.变量名

相关文章

  • React 知识点小结(三):传参及路由

    方法绑定 不带参数: 带参数: 子到父的传参 在父组件创建方法,这个方法用来改变父组件的值把这个方法通过属性传递给...

  • React路由传参

    1.params 优势 : 刷新地址栏,参数依然存在缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而...

  • React路由传参

    1.params xxx...

  • react路由传参

    list页->detail页方法一:路由参数**路由导航:用“/” 路由map: 加"/:id" detail页获...

  • react路由传参

    背景,找到一篇博文写的关于路由传参,但是该片博文中有一些错误的信息,所以在下重新整理了一下内容这是参考的博文地址h...

  • react 路由传参

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • react-31-路由传参

    1. 前言 传参一直都是重点一起梳理下 有哪些路由传参的方式本章节代码在react-路由配置[https://ww...

  • 八、Flutter路由

    目录一、基本路由二、基本路由传参三、命名路由四、命名路由传参五、替换路由六、返回到根路由 一、基本路由 跳转到De...

  • react路由跳转传参方式

    react在路由跳转进行传参有以下几种方式:1. params方式传参app.js 子组件OnRefs.js 组件...

网友评论

      本文标题:React 知识点小结(三):传参及路由

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