如何在功能组件中使用 ref 访问组件的方法

Question

我正在尝试使用createRef()访问组件方法，但是我收到TypeError: modalRef.current is null error back。

我以前从未使用过 refs，所以如果它错误地指导了如何实现我想要做的事情。

这是我的尝试

const parent = () => {
  const modalRef = createRef();
  const onBtnClick = () => {
   modalRef.current.upadeState();
  }
  return(
  <div>
   <button onclick={onBtnClick}>bro</button>
    <Modal ref={modalRef} />
  </div>
 )
}

模态

export default Modal = () => {
  const upadeState = () => {
   console.log('It works fam');
   }
  return(
  <div>
    bro we here
  </div>
 )
}

Answer 1

为了从钩子中的父组件调用子组件方法，我们使用React.forwardRef和React.useImperativeHandle钩子。

下面是一个调用 child 方法的例子。

儿童.js

import React from "react";
const { forwardRef, useState, useImperativeHandle } = React;

// We need to wrap component in `forwardRef` in order to gain
// access to the ref object that is assigned using the `ref` prop.
// This ref is passed as the second parameter to the function component.
const Child = forwardRef((props, ref) => {
  const [state, setState] = useState(0);

  const getAlert = () => {
    alert("getAlert from Child");
    setState(state => state + 1)
  };

  // The component instance will be extended
  // with whatever you return from the callback passed
  // as the second argument
  useImperativeHandle(ref, () => ({
    getAlert,
  }));

  return (
    <>
      <h1>Count {state}</h1>
      <button onClick={() => getAlert()}>Click Child</button>
      <br />
    </>
  );
});

父.js

import React from "react";
const { useRef } = React;

export const Parent = () => {
  // In order to gain access to the child component instance,
  // you need to assign it to a `ref`, so we call `useRef()` to get one
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click Parent</button>
    </div>
  );
};

子组件渲染并使用创建裁判React.useRef命名childRef。 我们在父组件中创建的按钮现在用于调用子组件函数childRef.current.getAlert();