react父組件調(diào)用子組件的方式匯總
前言
本文是小結(jié)類文章,主要總結(jié)一下工作中遇到的父組件調(diào)用子組件方法。當(dāng)然除了用ref之外還有很多其他方式,本文僅僅列舉ref的方式。分別介紹父子組件都為class;父子組件都是hooks;父組件是class子組件是hooks;父組件是hooks,子組件是class的各種情況的調(diào)用方式。
父子組件都為class
父子組件都是class,父組件調(diào)用子組件方式比較傳統(tǒng),方法如下:
// 父組件 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 回調(diào)可以引用它 this.props.onRef(this) } myName = () => alert('my name is haorooms blogs') render() { return (<div>haorooms blog test</div>) } }
父子組件都為hooks
一般我們會結(jié)合useRef,useImperativeHandle,forwardRef等hooks來使用,官方推薦useImperativeHandle,forwardRef配合使用,經(jīng)過實踐發(fā)現(xiàn)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}>觸發(fā)子組件方法</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
其實就是上面的結(jié)合體。子組件還是用useImperativeHandle ,可以結(jié)合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();調(diào)用子組件方法 <RichText getRichText={getRichText} content={content} onRef={ref => richTextRef = ref} /> //子組件class componentDidMount = () => { this.props.onRef && this.props.onRef(this);// 關(guān)鍵部分 } reseditorState = (content) => { this.setState({ editorState: content ||'-', }) }
小結(jié)
本文主要是總結(jié),有些朋友在hooks或者class混合使用的時候,不清楚怎么調(diào)用子組件方法,這里總結(jié)一下,希望對各位小伙伴有所幫助。
到此這篇關(guān)于react父組件調(diào)用子組件的文章就介紹到這了,更多相關(guān)react父組件調(diào)用子組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React Native基礎(chǔ)入門之初步使用Flexbox布局
React中引入了flexbox概念,flexbox是屬于web前端領(lǐng)域CSS的一種布局方案,下面這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之初步使用Flexbox布局的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2018-07-07react-router-dom6(對比?router5)快速入門指南
這篇文章主要介紹了快速上手react-router-dom6(對比?router5),通過本文學(xué)習(xí)最新的react-router-dom?v6版本的路由知識,并且會與v5老版本進行一些對比,需要的朋友可以參考下2022-08-08React類組件中super()和super(props)的區(qū)別詳解
這篇文章給大家詳細介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01React自定義hooks同步獲取useState的最新狀態(tài)值方式
這篇文章主要介紹了React自定義hooks同步獲取useState的最新狀態(tài)值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03