关于React父子组件通信知识总结

928 阅读2分钟

父组件调用子组件方法

父组件要调用子组件的方法时,可以先给父组件js文件中的子组件的标签标记上一个ref的参数,例如:ref=”getSonfunction”,然后在父组件js文件中需要调用子组件方法的位置写上:this.refs.getSonfunction.子组件方法名() 就可以调用子组件方法了。
特殊地,如果子组件是一个react.router的一个路由标签,则不可在路由标签里直接传递参数,因为路由标签不允许自定义参数,则需要在render里面用到React.cloneElement去克隆一个模拟的标签去代替那个路由标签,其中React.cloneElement接收的第一个参数为一个组件标签或一个标签,第二个参数给标签需要传递的参数(用键值对的形式并用大括号包起来)或者(注意是或者)是this.state(也就是把react.state里面的参数拿来作为它的参数)。
例如:①{React.cloneElement(this.props.children,this.state) }
或者:②{React.cloneElement(this.props.children,{ref:"getsonfunction"}) }
(提示:如果既想传递this.state又想传递自定义参数{ref:"getsonfunction"},则可以直接将自定义参数写入到react的state里面 ref:”getsonfunction”)再直接套用①的模板即可。
其中,this.props代表 父route,this.props.children为父route下面的所有子route,将this.state里的参数或者(注意是或者)一个自定义参数{ref:”getsonfunciton”} 这两个参数传递给 所有的子route标签。这样就可以实现,即使因为router路由标签不能为其添加属性值的情况。就可以利用react.cloneElement的形式去传递值。即可。(值得注意的是传递自定义属性时,一定要用{}括号给包裹起来。)
更值得一提的是,ref属性(例如ref=”hello”)是为了给添加ref属性的标签做上记号,在react的方法中可以实现this.refs.hello去获取到这个标签,然后进行操作。就相当于起到了jQuery中的标签选择器一样的作用。

子组件调用父组件方法

子组件要调用父组件的方法时,在子组件调用父组件方法的写法为:this.props.getdadfunction(),然后再父组件js文件的相对应子组件标签添加 属性:getdadfunction={this.父组件方法名}。就可以实现子组件调用父组件方法了。