当前位置：首页 > React

react父子组件如何调用

2026-01-24 10:59:11React

父子组件通信方法

父组件向子组件传递数据可以通过props实现。父组件在渲染子组件时，将数据作为属性传递给子组件。

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

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

子组件向父组件通信

子组件通过调用父组件传递的回调函数来实现通信。父组件定义一个函数并通过props传递给子组件。

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

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

使用Context跨层级通信

当组件层级较深时，可以使用React Context来避免props逐层传递。

const MyContext = React.createContext();

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

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

使用Ref直接调用子组件方法

父组件可以通过ref直接调用子组件的方法，适用于需要直接操作子组件的情况。

// 子组件
const Child = React.forwardRef((props, ref) => {
  React.useImperativeHandle(ref, () => ({
    childMethod: () => {
      console.log("Child method called");
    }
  }));
  return <div>Child Component</div>;
});

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

状态提升模式

当多个子组件需要共享状态时，可以将状态提升到最近的共同父组件中。

// 父组件
function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ChildA count={count} />
      <ChildB onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

// 子组件A
function ChildA({ count }) {
  return <div>Count: {count}</div>;
}

// 子组件B
function ChildB({ onIncrement }) {
  return <button onClick={onIncrement}>Increment</button>;
}

react父子组件如何调用