react实现父子通信
父组件向子组件传递数据（Props）
父组件通过props将数据传递给子组件。子组件通过props接收父组件传递的数据。
父组件示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const message = "Hello from Parent";
return <ChildComponent message={message} />;
}子组件示例：
function ChildComponent(props) {
return <div>{props.message}</div>;
}子组件向父组件传递数据（回调函数）
父组件定义一个回调函数，通过props传递给子组件。子组件调用该回调函数将数据传回父组件。
父组件示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const handleData = (data) => {
console.log("Data from child:", data);
};
return <ChildComponent onData={handleData} />;
}子组件示例：
function ChildComponent(props) {
const sendData = () => {
props.onData("Data from Child");
};
return <button onClick={sendData}>Send Data</button>;
}使用Context API跨层级通信
创建Context提供全局数据共享，适合跨多级组件通信。
创建Context：
import { createContext } from 'react';
const MyContext = createContext();
export default MyContext;父组件提供数据：
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const value = "Shared Data";
return (
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
);
}子组件消费数据：
import { useContext } from 'react';
import MyContext from './MyContext';
function ChildComponent() {
const contextValue = useContext(MyContext);
return <div>{contextValue}</div>;
}使用Refs访问子组件实例
父组件通过ref直接调用子组件的方法或访问其属性。
子组件示例：
import { forwardRef, useImperativeHandle } from 'react';
const ChildComponent = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
showAlert: () => alert("Child Method Called")
}));
return <div>Child Component</div>;
});父组件示例：
import { useRef } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = useRef();
const handleClick = () => {
childRef.current.showAlert();
};
return (
<>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>Call Child Method</button>
</>
);
}
