当前位置：首页 > React

react如何实现父子通信

2026-02-12 09:57:13React

父子组件通信的实现方式

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

通过props传递数据 父组件可以通过props向子组件传递数据。子组件通过this.props（类组件）或直接通过props参数（函数组件）接收数据。

// 父组件
function Parent() {
  const data = "Hello from parent";
  return <Child message={data} />;
}

// 子组件
function Child(props) {
  return <div>{props.message}</div>;
}

通过回调函数通信 父组件可以传递一个回调函数给子组件，子组件调用该函数将数据传回父组件。

// 父组件
function Parent() {
  const handleData = (data) => {
    console.log(data);
  };
  return <Child onData={handleData} />;
}

// 子组件
function Child({ onData }) {
  const sendData = () => {
    onData("Data from child");
  };
  return <button onClick={sendData}>Send Data</button>;
}

使用Context API 对于深层嵌套的组件，可以使用Context API避免逐层传递props。

const MyContext = React.createContext();

// 父组件
function Parent() {
  return (
    <MyContext.Provider value="Context Data">
      <Child />
    </MyContext.Provider>
  );
}

// 子组件
function Child() {
  const data = useContext(MyContext);
  return <div>{data}</div>;
}

使用Refs 父组件可以通过ref直接调用子组件的方法。

react如何实现父子通信

// 子组件（类组件）
class Child extends React.Component {
  method() {
    console.log("Child method called");
  }
  render() {
    return <div>Child Component</div>;
  }
}

// 父组件
function Parent() {
  const childRef = useRef();
  const callChildMethod = () => {
    childRef.current.method();
  };
  return (
    <>
      <Child ref={childRef} />
      <button onClick={callChildMethod}>Call Child Method</button>
    </>
  );
}