React Hooks中父組件中調用子組件方法

React Hooks中父組件中調用子組件方法

使用到的hooks-- useImperativeHandle，useRef

/* child子組件 */
// https://reactjs.org/docs/hooks-reference.html#useimperativehandle
import {useState, useImperativeHandle} from 'react';
...
// props子組件中須要接受ref
const ChildComp = ({cRef}) => {
	const [val, setVal] = useState();
	// 此處注意useImperativeHandle方法的的第一個參數是目標元素的ref引用
	useImperativeHandle(cRef, () => ({
		// changeVal 就是暴露給父組件的方法
	    changeVal: (newVal) => {
	      setVal(newVal);
	    }
  	}));
  	...
  	return (
		<div>{val}</div>
	)
}

　　

/* FComp 父組件 */
import {useRef} from 'react;
...
const FComp = () => {
	const childRef = useRef();
	const updateChildState = () => {
		// changeVal就是子組件暴露給父組件的方法
		childRef.current.changeVal(99);
	}
	...
	return (
		<>
			{/* 此處注意須要將childRef經過props屬性從父組件中傳給本身 cRef={childRef} */}
			<ChildComp  cRef={childRef} />
			<button onClick={updateChildState}>觸發子組件方法</button>
		</>
	)
}

　　

 

方法2、參考react官方文檔：

import {useState, useImperativeHandle,forwardRef} from 'react';
// props子組件中須要接受ref
let ChildComp = (props,ref) => {
	// 此處注意useImperativeHandle方法的的第一個參數是目標元素的ref引用
	useImperativeHandle(ref, () => ({
		// changeVal 就是暴露給父組件的方法
	    changeVal: (newVal) => {
	      
	    }
  	}));
  	return (
		<div>{val}</div>
	)
}
ChildComp = forwardRef(ChildComp)

　　

/* FComp 父組件 */
import {useRef} from 'react';
const FComp = () => {
	const childRef = useRef();
	const updateChildState = () => {
		// changeVal就是子組件暴露給父組件的方法
		childRef.current.changeVal(99);
	}
	return (
		<>
			<ChildComp ref={childRef} />
			<button onClick={updateChildState}>觸發子組件方法</button>
		</>
	)
}

　　

 注意：

useRef 僅能用在 FunctionComponent，createRef 僅能用在 ClassComponent。