这篇文章主要介绍反应中传递参数的方式有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
反应是一个用于构建用户界面的JAVASCRIPT库。
主反应要用于构建UI,很多人认为是MVC中反应的V(视图)。
反应起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。
反应拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
最常见的就是父子组件之间传递参数
父组件往子组件传值,直接用this.props就可以实现
父组件中,给需要传递数据的子组件添加一个自定义属性,在子组件中通过这个。道具就可以获取到父组件传递过去的数据
//,父组件,渲染(),{,,,,,,, ,,,return (,,,,,,,,,,,,,,,//,使用自定义属性传递需要传递的方法或者参数 ,,,,,,,,,,,,,,,& lt; ShopUi toson={this.state}祝辞& lt;/ShopUi>,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,) ,,,},//子组件//通过this.props.toson就可以获取到父组件传递过来的数据,,如果还需要往孙组件传递那么在子组件通过自定义属性继续传递就行了 ,,,,,tograndson={this.props.toson} ,孙组件通过this.props。tograndson获取到数据
子组件给父组件传值的话,需要在父组件设置接收函数和状态,同时将函数名通过道具传递给子组件
也就是给子组件传入父组件的方法,在子组件进行调用
//孙子组件export default class Grandson extends 组件{ ,,,渲染(){,,,,,,,return (,,,,,,,,,,, & lt; div 风格={{边界:“1 px solid red",保证金:,“10 px"}}祝辞 {this.props.name}:,,,,,,,,,,,,,,,, & lt; select onChange={this.props.handleSelect}比; ,,,,,,,,,,,,,,,,,,,& lt; https://www.yisu.com/zixun/option 价值="男">男选项> <选项值="女">女> 选项 选择>
前一段时间有人问过我这样一个问题,构造函数里面的超级()是干嘛用的?
总结一下:
如果要在子类的构造函数里使用,必须调用父类构造函数,否则就拿不到这
那么问题就来了,如何调用父类的构造函数呢?通过超级()
如果要在构造函数里使用父组件传递过来的参数,必须在调用父组件超级时,传递参数给父组件的构造函数
如果不在构造函数里面使用,或者参数,就不需要超级;因为反应以及帮你做了这个,道具的绑定
路由传参
安装npm安装react-router-dom——save-dev
定义路由(一般会放在外面)
,& lt; HashRouter>, ,,,& lt; Switch>, ,,,,,,,& lt; Route exact 路径=??组件={回家}/祝辞, ,,,,,,,& lt; Route exact 路径=?detail",组件={细节}/祝辞, ,,,& lt;/Switch>, & lt;/HashRouter>
当页面跳转时
& lt; li , onClick={el =比;this.props.history.push ({ 路径名:& # 39;/细节# 39; ,,,,,状态:{id: 3} })}祝辞 & lt;/li>
接收,,通过this.props.history。位置可以获取到传递过来的数据
路由传参可能会有这个问题,就是只有在路由定义时挂载的组件中才会有道具里面位置的历史匹配
路由上挂载的那个组件一般都是Container.js,一般我们会往下分出UI。js组件,在这里面进行点击跳转,UI组件道具里没有位置历史匹配
需要用到高阶组件withRouter
状态提升
将多个组件需要共享的状态提升到离他们最近的那个公共父组件上,然后父组件通过道具分发给子组件