React 父组件调用子组件的方法

目录

1. 自定义事件

2.  使用 React.createRef()

3.  使用回调Refs

4.  使用props自定义onRef属性

---

1. 自定义事件

parent.js

import React, { Component } from 'react';

import Child from './Child';

class Parent extends Component {
  componentDidMount () {
    console.log(this.childRef)
  }
  handleChildEvent = (ref) => {
  	// 将子组件的实例存到 this.childRef 中, 这样整个父组件就能拿到
    this.childRef = ref
  }
  //按钮事件处理
  handleClick = () => {
  	// 通过子组件的实例调用子组件中的方法
    this.childRef.sendMessage()
  }
  render () {
    return (
      <>
        <Child
          onChildEvent={this.handleChildEvent}
        />
        <button onClick={this.handleClick}>触发子组件事件</button>
      </>
    );
  }
}

export default Parent;

child.js

在componentDidMount中，子组件调用父组件中的onChildEvent方法，并将当前的实例传递进去。

import React, { Component } from 'react';

class Child extends Component {
	//子组件完成挂载时, 将子组件的方法 this 作为参数传到父组件的函数中
  componentDidMount () {
  	// 在子组件中调用父组件的方法,并把当前的实例传进去
    this.props.onChildEvent(this)
  }
  // 子组件的方法, 在父组件中触发
  sendMessage = () => {
    console.log('sending message')
  }
  render () {
    return ( <div>Child</div> );
  }
}

export default Child;

2.  使用 React.createRef()

parent.js

this.childRef = React.createRef()

直接通过this.childRef.current 拿到子组件实例

import React, { Component } from 'react';

import ChildCmp from './ChildCmp';

export default class ParentCmp extends Component {
  constructor(props) {
    super(props)
    // 创建Ref
    this.childRef = React.createRef()
  }
  // 按钮事件
  handleClick = () => {
  	// 直接通过 this.childRef.current 拿到子组件实例
    this.childRef.current.sendMessage()
  }
  render () {
    return (
      <>
        <ChildCmp ref={this.childRef} />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </>
    );
  }
}

child.js

import React, { Component } from 'react';

export default class ChildCmp extends Component {
  sendMessage = () => {
    console.log('sending message')
  }
  render () {
    return 'Child';
  }
}

3.  使用回调Refs

• 回调 Refs 是另一种设置 Ref 的方式，它能助你更精细地控制何时 refs 被设置和解除。

• 不同于传递 createRef() 创建的 ref 属性，需要传递一个函数。

• 访问 Ref 的时候也不需要 current。

parent.js

创建 Ref，不通过 React.createRef()

this.childRef = null

import React, { Component } from 'react';

import ChildCmp from './ChildCmp';

export default class ParentCmp extends Component {
  constructor(props) {
    super(props)
    // 创建 Ref，不通过 React.createRef()
    this.childRef = null
  }
  // 设置 Ref
  setChildRef = (ref) => {
    this.childRef = ref
  }
  // 按钮事件
  handleClick = () => {
    // 直接通过 this.childRef 拿到子组件实例
    this.childRef.sendMessage(`Trigger Child Event from Parent`)
  }

  render () {
    return (
      <>
        <ChildCmp ref={this.setChildRef} />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </>
    );
  }
}

child.js

import { Component } from 'react';

export default class ChildCmp extends Component {
  sendMessage = (message) => {
    console.log('sending message:', message)
  }
  render () {
    return 'Child';
  }
}

【注】对比自定义事件方式，回调 Refs 更像是精简的自定义事件方式：

• 自定义事件名称变成了 ref

• 子组件内不需要手动绑定

4.  使用props自定义onRef属性

parent.js

class Parent extends Component {
	handleOnClick(){
		this.Child.func();
	}
	render(){
		return (<div>
			<button onClick={this.handleOnClick}>click</button>
			<Child onRef={ node => this.Child = node }></Child>	
		</div>);
	}
}

child.js 

class Child extends Component {
	componentDidMount(){
        // 传递子组件的this
		this.props.onRef && this.props.onRef(this);
	}
	func(){
		console.log("执行我")
	}
	render(){
		return (<div>子组件</div>);
	}
}