React传值

Posted 2023-03-23

参考技术A

数据传值大概无非是这几种情况。
1.父传子
2.子传夫
3.跨层级组件传值
4.路由传值（什么情况都可以用~但是涉及一些长的或者隐私的不建议用）
我这个人对传值这块真的有时候迷迷糊糊的，所以这次刚好复习的时候整理一下传值。

这个是最简单也是最常用的传值了。
前提条件就是父组件要引用子组件！
通常是通过props和ref传值和 方法
props

通过ref传值
父组件可以通过ref选择到子组件的function，如果需要子组件的值则用return

父组件通过 props 向子组件传入一个方法，子组件在通过调用该方法，将数据以参数的形式传给父组件，父组件通过该方法使用数据。

利用 props callback 通信，父组件传递一个 callback 到子组件，当事件触发时将参数放置到 callback 带回给父组件。

使用 Context 作为中间载体传值。避免了在每一个层级手动的传递 props 属性，适合于多层级的时候使用
官方文档
首先：新建 Context.js

最经典的就是使用 params 传值 需安装react-router-dom
形式：/:xx （xx就是要传值的参数）

怎么用呢？来看以下几步。
首先
路由配置 ：

1. js跳转 ：
this.props.history.push(\'/index/mika\')
2. 标签跳转 :
引入 Link 标签 import Link from \'react-router-dom\'
使用 Link 标签跳转 <Link to="/index/mika">this is link</Link>
跳转页面接收值 ： this.props.match.params.name 其中name就是传的参数值，自己定义了什么就叫什么名字。

还有一种 query 传参
1.js跳转：

在要跳转的组件上绑定onClick就可以使用。query为一个对象，携带的是需要传的参数。
不需要提前引入，也不需要路由设置，正常配置就可以 。
跳转页面接收值 ： this.props.location.query

简单的说一下2个传参的区别：
1. params 传递显示参数， query 传递不显示参数， query 相对于 params 来说较安全一点
2. params 传值页面刷新数据还在，而 query 传值页面刷新数据会消失。
3. params 传值只能传一个， query 可以传多个对象。

那有没有数据传参不显示、刷新地址栏数据也不会小时的方法呢？有啊！

传参的方法和query差不多，属性不一样。
不需要路由配置
1.js跳转： this.props.history.push(pathname:\'/index\',state:name:\'mima\')
2. 标签跳转 <Link to=path:\'/index\',state:name:\'mika\'>XX</Link>
跳转页面接收值 ： this.props.location.state.name

以上暂时就这些了 没包括一些传值的包，如果需要可以自己去了解