父調用子的方法

// 子組件
import React, { useRef, useEffect } from 'react';const ChildComponent = ({ childMethodRef }) => {const childMethod = useRef(null);useEffect(() => {childMethodRef.current = childMethod;}, []);const someMethod = () => {console.log('子組件的方法被調用');};return (<div>子組件內容</div>);
};export default ChildComponent;// 父組件
import React, { useRef, useEffect } from 'react';
import ChildComponent from './ChildComponent';const ParentComponent = () => {const childMethodRef = useRef(null);useEffect(() => {if (childMethodRef.current) {childMethodRef.current.someMethod();}}, []);return (<div><ChildComponent childMethodRef={childMethodRef} />父組件內容</div>);
};export default ParentComponent;

子調用父的方法

import React, { useState } from 'react';function ParentComponent() {const [message, setMessage] = useState('');const handleCallback = (msgFromChild) => {setMessage(msgFromChild);};return (<div><h1>消息從子組件接收: {message}</h1><ChildComponent onMessageReceived={handleCallback} /></div>);
}function ChildComponent({ onMessageReceived }) {const sendMessageToParent = () => {onMessageReceived('這是來自子組件的消息');};return (<div><button onClick={sendMessageToParent}>發送消息給父組件</button></div>);
}export default ParentComponent;