前言
本文是小结类文章，主要总结一下工作中遇到的父组件调用子组件方法。当然除了用ref之外还有很多其他方式，本文仅仅列举ref的方式。分别介绍父子组件都为class；父子组件都是hooks；父组件是class子组件是hooks；父组件是hooks，子组件是class的各种情况的调用方式。
父子组件都为class
父子组件都是class，父组件调用子组件方式比较传统，方法如下：
// 父组件
import React, {Component} from 'react';
export default class Parent extends Component {
render() {
return(
<div>
<Child onRef={this.onRef} />
<button onClick={this.click} >click</button>
</div>
)
}
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 (<div>haorooms blog test</div>)
}
}父子组件都为hooks
一般我们会结合useRef，useImperativeHandle,forwardRef等hooks来使用，官方推荐useImperativeHandle,forwardRef配合使用，经过实践发现forwardRef不用其实也是可以的，只要子组件把暴露给父组件的方法都放到useImperativeHandle里面就可以了。
/* FComp 父组件 */
import {useRef} from 'react';
import ChildComp from './child'
const FComp = () => {
const childRef = useRef();
const updateChildState = () => {
// changeVal就是子组件暴露给父组件的方法
childRef.current.changeVal(99);
}
return (
<>
<ChildComp ref={childRef} />
<button onClick={updateChildState}>触发子组件方法</button>
</>
)
}
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 (
<div>子组件</div>
)
}
Child = forwardRef(Child)
export default Child父组件为class,子组件为hooks
其实就是上面的结合体。子组件还是用useImperativeHandle ，可以结合forwardRef，也可以不用。
// 父组件class
class Parent extends Component{
child= {} //主要加这个
handlePage = (num) => {
// this.child.
console.log(this.child.onChild())
}
onRef = ref => {
this.child = ref
}
render() {
return {
<ListForm onRef={this.onRef} />
}
}
}
// 子组件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，子组件是class
这里其实和上面差不多，react主要dom省略，仅展示精华部分
//父组件hooks
let richTextRef = {};
// richTextRef.reseditorState();调用子组件方法
<RichText
getRichText={getRichText}
content={content}
onRef={ref => richTextRef = ref}
/>
//子组件class
componentDidMount = () => {
this.props.onRef && this.props.onRef(this);// 关键部分
}
reseditorState = (content) => {
this.setState({
editorState: content ||'-',
})
}小结
本文主要是总结，有些朋友在hooks或者class混合使用的时候，不清楚怎么调用子组件方法，这里总结一下，希望对各位小伙伴有所帮助。
到此这篇关于react父组件调用子组件的文章就介绍到这了,更多相关react父组件调用子组件内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！