转发参考类型记录:转发react元素

Question

代码：

import React, { useImperativeHandle, useState } from 'react';


const SnackBar = React.forwardRef((_, ref) => {
  const [isSnackbarVisible, setisSnackbarVisible] = useState(false);

  const show = (text: string) => {
    setisSnackbarVisible(true);
  };

  const hide = () => {
    setisSnackbarVisible(false);
  };

  useImperativeHandle(ref, () => ({ show, hide }));

  if (!isSnackbarVisible) return;

  return (
    <div
      style={{ backgroundColor: 'rgba(0, 0, 0, 0.35)' }}
      className="absolute z-50 top-0 bottom-0 left-0 right-0  flex items-center justify-center"
    >
      <button
        onClick={() => {
          hide();
        }}
      >
        dasdas
      </button>
    </div>
  );
});

export default SnackBar;

错误：

 Argument of type '(_: {}, ref: ForwardedRef<unknown>) => Element | undefined' is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, {}>'.
  Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'.
    Type 'undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'.ts(2345)

这里的类型是什么？

Answer 1

当您的Snackbar不可见时，将返回与方法签名不兼容的隐式undefined。您可以在发布的错误消息的最后一行中找到此提示。

尝试将代码的这一行更改为空元素。

if (!isSnackbarVisible) return <></>;

或null

if (!isSnackbarVisible) return null;