react 父组件调用子组件中的方法

组件间通信除了props外还有onRef方法，不过React官方文档建议不要过度依赖ref。

//父组件
import React, { Component } from "react"; import Child from "./Child"; class Dad extends Component { constructor(props) { super(props); this.state = { arr:["暴富","暴瘦"], txt:"我是尼爸爸" } } onRef=(ref)=>{ this.Child=ref; } click=()=>{ this.Child.childFn(); } render() { return ( <div>
                <Child onRef={this.onRef}></Child>
                <button onClick={this.click}>父组件调用子组件中的方法</button>
            </div>
 ) } } export default Dad; //子组件
import React, { Component } from "react"; class Child extends Component { constructor(props){ super(props); } componentDidMount() { this.props.onRef(this) } childFn=()=>{ console.log("我是子组件中的方法") } render() { return ( <div>
           </div>
 ) } } export default Child;

原理：

当在子组件中调用onRef函数时，正在调用从父组件传递的函数。this.props.onRef（this）这里的参数指向子组件本身，父组件接收该引用作为第一个参数：onRef = {ref =>（this.child = ref）}然后它使用this.child保存引用。之后，可以在父组件内访问整个子组件实例，并且可以调用子组件函数。