当前位置：首页 > React

react如何实现父子通信

2026-01-24 06:02:07React

父子组件通信方法

在React中，父子组件通信主要通过props和回调函数实现。以下是几种常见方式：

父组件向子组件传递数据

通过props将数据从父组件传递给子组件。父组件定义属性，子组件通过props接收。

父组件：

function ParentComponent() {
  const message = "Hello from parent";
  return <ChildComponent message={message} />;
}

子组件：

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

子组件向父组件传递数据

通过回调函数实现。父组件将函数作为prop传递给子组件，子组件调用该函数并传递数据。

react如何实现父子通信

父组件：

function ParentComponent() {
  const handleData = (data) => {
    console.log(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 API避免prop drilling。

react如何实现父子通信

创建Context：

const MyContext = React.createContext();

function ParentComponent() {
  return (
    <MyContext.Provider value="Context Value">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {value => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

使用Refs

父组件可以通过ref直接访问子组件实例和方法。

父组件：

function ParentComponent() {
  const childRef = React.useRef();

  const callChildMethod = () => {
    childRef.current.childMethod();
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={callChildMethod}>Call Child Method</button>
    </>
  );
}

子组件：

const ChildComponent = React.forwardRef((props, ref) => {
  React.useImperativeHandle(ref, () => ({
    childMethod: () => console.log("Child method called")
  }));

  return <div>Child Component</div>;
});