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>
    </>
  );
}