尝试显示显示警报功能但遇到问题

Question

这里我有一个带有按钮的父组件和一个带有显示警报功能的子组件。

但我收到此错误，

Function components cannot be given refs. Attempts to access this ref will fail.

代码：

import { useRef } from "react"

const ChildComp = () => {
  function showAlert() {
    alert("Hello from Child Component")
  }
  return <div></div>
}

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App

有什么问题？

Answer 1

import React, { useRef } from "react";

const ChildComp = React.forwardRef((props, ref) => {
  function showAlert() {
    alert("Hello from Child Component");
  }
  return <div ref={ref}></div>;
});

function App() {
  const childCompRef = useRef();
  return (
    <div>
      <button>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  );
}

export default App;

如果你想传递引用，你必须在子组件中使用forwardRef。

Answer 2

import React, { useRef } from "react";

const ChildComp = React.forwardRef((props, ref) => {
  function showAlert() {
    alert("Hello from Child Component");
  }
  return <button ref={ref} onClick={(e)=>showAlert()}>Click Me</button>;
});

function App() {
  const childCompRef = useRef();
  return (
    <div>
      
      <ChildComp ref={childCompRef} />
    </div>
  );
}

export default App;

Answer 3

当我们用 forwardRef 包围子组件时，它会接收到 props 之外的第二个参数，即从 parent 传递的 ref组件。

现在，借助此引用，我们可以指定父组件可以访问哪些函数。这可以使用 useImperativeHandle hook 来完成，如下所示：

import { forwardRef, useRef, useImperativeHandle } from "react"

const ChildComp = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert("Hello from Child Component")
    },
  }))
  return <div></div>
})

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button onClick={() => childCompRef.current.showAlert()}>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App

我发现这也很有帮助，StackOverflow