react 组件通讯
react 是单向数据流的,数据通过props由父组件向子组件传递。
常见的传值方式如下所示:
- 父组件向子组件传值,可以直接通过 props 传递。
- 子组件向父组件传值,可以调用父组件props传过来的函数,函数体接收子组件的值,再由父组件进行对值的操作。
父组件调用子组件
在react中有时候为了实现某些更“优雅”的操作,需要在父组件中调用子组件的方法。
比如,当你实现一个弹窗时,你需要从父组件把控制弹窗显示关闭的值传给子组件,同时,还要把控制弹窗关闭的方法传给子组件。这样写,看着就很糟糕!!!
实现方法:
父组件可以通过props把onRef方法传递给子组件调用,那么子组件通过这个函数把自己的组件实例传回给父组件,父组件只需要保存子组件实例便可以调用子组件的方法
子组件:
在子组件中调用父组件传过来的onRef 方法,把this传给父组件
import React from 'react'
import {Modal} from 'antd'
export default class Child extends React.Component {
state = {
visible: false
}
componentDidMount(){
this.props.onRef(this)
}
visibleToggle = () => {
this.setState({
visible: !this.state.visible
})
}
render() {
return (
<Modal
title="我是弹窗"
visible={this.state.visible}
onCancel={this.visibleToggle}
>
</modal>
)
}
}
父组件:
在父组件中,接收子组件传过来的this,并赋值给this.child,这样,Parent组件就能愉快的调用Child组件的方法了
import React from 'react';
export default class Parent extends React.Component {
onChildShow = () => {
this.child.visibleToggle()
}
render() {
return(
<div>
<Child onRef={ref => this.child = ref} />
<button onClick={this.onChildShow} >click</button>
</div>
)
}
}