React的传参方式总结

React中 传参方式 及其应用场景

第一种： 动态路由传参

       通过设置的link的to(path)属性，进行路由的传参，当点击link标签的时候，就会在上方的地址栏中显示传递的整个url
我们可以通过this.props.location.search获取字符串并筛选出想要应用的数据(不安全)
样式：

<Link to='/home?name='tom'' />

---

第二种： 隐式路由传参

       考虑到动态路由传参的不安全性，出现了隐式路由传参，其传参的信息不会暴露在地址栏中，会通过state(一般命名为state)携带
我们可以通过this.props.location.state获取传递的参数
样式

 <Link to={{ pathname: 'about',state: {name: 'dx'}}} />

---

第三种： 组件之间的传参

       当父组件想要给子组件传递参数的时候，推荐使用组件间的传参方式，子组件通过this.props接收
样式

<TextB state = {obj}, age="18" /> （假设场景：TextA的子组件是TextB，父组件TextA中的obj想要在
子组件TextB中展示）

第四种： WithRoute高阶组件给子组件绑定路由参数

       当我们想要在某个组件里面 获取路由的数据的时候，只有是<Route>里面的子组件才可以，也就是<Route path="/home" component={Home(子组件)}/>
只有这样<Home />中才可以使用this.props接收路由的参数；为了解决这一个局限性，就有了withRouter的技术
样式：

在子组件中导出： export default withRouter(Home)  其中withRouter: import {withRouter} from "react-route-dom"