当前位置：首页 > React

react父子组件之间如何通信

2026-01-25 03:47:58React

父组件向子组件传递数据

父组件通过props向子组件传递数据。在父组件中定义属性，子组件通过this.props接收。

父组件代码示例：

<ChildComponent message="Hello from parent" />

子组件代码示例：

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

子组件向父组件传递数据

子组件通过回调函数向父组件传递数据。父组件定义回调函数并通过props传递给子组件，子组件调用该函数并传递数据。

父组件代码示例：

function ParentComponent() {
  const handleData = (data) => {
    console.log(data);
  };
  return <ChildComponent onData={handleData} />;
}

子组件代码示例：

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

使用Context跨层级通信

当组件层级较深时，可以使用React Context避免props逐层传递。创建Context对象并通过Provider提供数据，子组件通过Consumer或useContext Hook消费数据。

创建Context示例：

const MyContext = React.createContext();

提供数据示例：

<MyContext.Provider value={value}>
  <ChildComponent />
</MyContext.Provider>

消费数据示例：

const value = useContext(MyContext);

使用状态管理库

对于复杂应用状态管理，可以使用Redux或MobX等状态管理库。这些库提供全局状态管理，任何组件都可以订阅和修改状态。

Redux基本使用示例：

import { useSelector, useDispatch } from 'react-redux';

function Component() {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  const updateData = () => {
    dispatch({ type: 'UPDATE_DATA', payload: newData });
  };
}

使用Ref直接访问组件实例

父组件可以通过Ref直接访问子组件实例，调用其方法或访问其状态。这种方式破坏了组件封装性，应谨慎使用。

父组件代码示例：

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

  const handleClick = () => {
    childRef.current.doSomething();
  };

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

子组件需要使用forwardRef：

react父子组件之间如何通信

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

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