当前位置：首页 > React

react父组件如何获取子组件

2026-01-25 20:47:14React

获取子组件方法

在React中，父组件可以通过几种方式获取子组件的引用或数据：

使用ref属性 通过React.createRef()或useRef钩子创建ref对象，将其传递给子组件。适用于需要直接访问子组件DOM节点或实例方法的情况。

// 父组件
function Parent() {
  const childRef = useRef(null);

  useEffect(() => {
    console.log(childRef.current); // 获取子组件实例
  }, []);

  return <Child ref={childRef} />;
}

// 子组件需使用forwardRef
const Child = forwardRef((props, ref) => {
  return <div ref={ref}>Child Component</div>;
});

通过props传递回调 子组件通过props接收父组件传递的函数，主动将数据回传给父组件。

// 父组件
function Parent() {
  const [childData, setChildData] = useState(null);

  return <Child onDataUpdate={setChildData} />;
}

// 子组件
function Child({ onDataUpdate }) {
  const handleClick = () => {
    onDataUpdate('data from child');
  };

  return <button onClick={handleClick}>Send Data</button>;
}

使用Context API 当组件层级较深时，可通过Context共享状态，避免prop逐层传递。

const DataContext = createContext();

function Parent() {
  const [data, setData] = useState(null);

  return (
    <DataContext.Provider value={{ data, setData }}>
      <Child />
    </DataContext.Provider>
  );
}

function Child() {
  const { setData } = useContext(DataContext);

  return (
    <button onClick={() => setData('child data')}>
      Update Context
    </button>
  );
}

使用状态管理库 Redux或MobX等状态管理工具可以集中管理组件间共享的状态。

react父组件如何获取子组件