react父调用子的方法，子调用父的方法

父调用子的方法

// 子组件
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;