react父组件调用子组件的方式汇总_React_

// 父组件 import React, {Component} from 'react'; export default class Parent extends Component { render() { return( 
click
 ) } onRef = (ref) => { this.child = ref } click = (e) => { this.child.myName() } } //子组件 class Child extends Component { componentDidMount(){ //必须在这里声明，所以 ref 回调可以引用它 this.props.onRef(this) } myName = () => alert('my name is haorooms blogs') render() { return (
haorooms blog test
) } }

/* FComp 父组件 */ import {useRef} from 'react'; import ChildComp from './child' const FComp = () => { const childRef = useRef(); const updateChildState = () => { // changeVal就是子组件暴露给父组件的方法 childRef.current.changeVal(99); } return ( <>触发子组件方法 ) } import React, { useImperativeHandle, forwardRef } from "react" let Child = (props, ref) => { const [val, setVal] = useState(); useImperativeHandle(ref, () => ({ // 暴露给父组件的方法 getInfo, changeVal: (newVal) => { setVal(newVal); }, refreshInfo: () => { console.log("子组件refreshInfo方法") } })) const getInfo = () => { console.log("子组件getInfo方法") } return ( 
子组件
 ) } Child = forwardRef(Child) export default Child

// 父组件class class Parent extends Component{ child= {} //主要加这个 handlePage = (num) => { // this.child. console.log(this.child.onChild()) } onRef = ref => { this.child = ref } render() { return {  } } } // 子组件hooks import React, { useImperativeHandle } from 'react' const ListForm = props => { const [form] = Form.useForm() //重置方法 const onReset = () => { form.resetFields() } } useImperativeHandle(props.onRef, () => ({ // onChild 就是暴露给父组件的方法 onChild: () => { return form.getFieldsValue() } })) ..............

//父组件hooks let richTextRef = {}; // richTextRef.reseditorState();调用子组件方法  richTextRef = ref} /> //子组件class componentDidMount = () => { this.props.onRef && this.props.onRef(this);// 关键部分 } reseditorState = (content) => { this.setState({ editorState: content ||'-', }) }