用react怎么使用子组件的引用 (function)

在React函数组件中,可以使用 useRef hook 来创建一个引用对象,并将其传递给子组件。下面是一个简单的示例:

import { useRef } from 'react';

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

  const handleClick = () => {
    childRef.current.doSomething(); // 调用子组件的方法
  };

  return (
    <>
      
      
    
  );
}

const ChildComponent = React.forwardRef((props, ref) => {
  const doSomething = () => {
    console.log('子组件被调用了');
  };

  // 将ref与子组件关联起来
  React.useImperativeHandle(ref, () => ({
    doSomething,
  }));

  return 
子组件
; });

在该示例中,父组件 ParentComponent 创建了一个 childRef 引用对象,并将其作为 ref 属性传递给子组件 ChildComponentChildComponent 使用 forwardRef 方法包裹函数组件,并在其中定义了一个 doSomething 方法。使用 useImperativeHandle hook 可以将 ref 对象与子组件实例关联起来,并暴露出一个 doSomething 方法。

最后,在父组件中,我们可以通过 childRef.current.doSomething() 来调用子组件的 doSomething 方法。

你可能感兴趣的:(Ant,Design,for,React,react.js,前端,javascript)