无法使用 useImperativeHandle 运行函数

Question

我正在尝试使用 useImperativeHandle 但仍然收到错误“无法添加当前属性，对象不可扩展”。每个教程中的代码都以类似的方式编写并且运行正常。我缺少一些东西，但我不知道是什么。

子元素

const Toast = forwardRef((ref) => {
  const [openToast, setOpenToast] = useState(true);

  useImperativeHandle(ref, () => ({
    show() {
      alert("hello");
    },
  }));
  return (
    <div>
    </div>
  );
});

export default Toast;

父元素

const FooterForm = () => {
  const toastRef = useRef(null);

  return (
    <>
      <Toast ref={toastRef} />
      <button
        onClick={() => {toastRef.current.show();}}
        type="button">
        Click
        </button>
    </>
  );
};

export default FooterForm;

我需要将 ref 传递给子组件并运行函数“show”

Answer 1

ForwardRef

组件始终需要精确的参数。第一个是你的道具，即使它们是空的。试试这个：

const Toast = forwardRef((props, ref) => {
  const [openToast, setOpenToast] = useState(true);

在这种情况下，道具将只是一个空对象，但如果您最终添加一些道具，它将包含您的组件道具。

• 此外，如果您还没有标记它，请务必使用“使用客户端”指令。