试图显示显示警报功能但面临问题

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;

这里如果要传递refs就必须在子组件中使用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 component传来的ref。

现在借助此 ref，我们可以指定 parent component 可以访问哪些功能。这可以使用 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

我发现这也很有帮助，

试图显示显示警报功能但面临问题

Trying to show show alert function but facing issues

javascript

reactjs

use-ref