React-父组件获取子组件的值或方法

从父组件获取子组件的值或方法:

下面用一个父组件（Father.js）和子组件（Child.js）来演示如何能拿到值和方法：

方法一：
给子组件添加属性 ref=‘childData’

<Child ref='childData'></Child>

然后在父组件用 this.refs.childData.xxx 的方式拿值

alert(this.refs.childData.state.sonmsg);//拿到子组件中state中的值
this.refs.childData.run();//拿到子组件中runn方法

方法二：
给子组件添加 onRef={(ref) => { this.child = ref; }}

<Child onRef={
    
    (ref) => {
    
     this.child = ref; }}></Child>

然后在子组件中添加生命周期的 componentDidMount 这个方法：

componentDidMount() {
    
    
     if (this.props.onRef) {
    
    
        this.props.onRef(this);
     }
}

然后在父组件用 this.child.xxx 的方式拿值

alert(this.child.state.sonmsg);
this.child.run();

方法三：
在父组件创建ref容器：this.pw = React.createRef()

constructor(props) {
    
    
    super(props);
    // 方法3：创建用来保存ref标识的标签对象的容器
    this.pw = React.createRef()
}

然后给子组件添加属性：ref={this.pw}

<Child ref={
    
    this.pw}></Child>

然后就可以在父组件用 this.pw.current 拿到子组件值和方法：

alert(this.pw.current.state.sonmsg); 
this.pw.current.run()