1

在这里，我有一个组件应该打印一个 toast，根据 toast 的类型在内容中添加一个图标：

import * as React from 'react';
import { toast }  from 'react-toastify';
import { FaInfo, FaCheck, FaExclamationTriangle, FaBug, FaExclamationCircle } from 'react-icons/fa';
import { TypeOptions, ToastContent, Toast } from 'react-toastify/dist/types/index';

interface IToast {
  message: ToastContent;
  type: TypeOptions;
}
    
const displayIcon = ({ type }: IToast) => {
          switch (type) {
            case 'success':
              return <FaCheck />;
            case 'info':
              return <FaInfo />;
            case 'error':
              return <FaExclamationCircle />;
            case 'warning':
              return <FaExclamationTriangle />;
            default:
              return <FaBug />;
          }
        };
    
const myToast = ({ type, message }: IToast): Toast => {
  return toast[type](
    <div>
      <div>
        {displayIcon(type)}
      </div>
      <div>{message}</div>
    </div>,
  );
};

export default myToast;

我通过执行以下操作在另一个组件上渲染 myToast：

const notify = React.useCallback((message: ToastContent, type: ToastOptions) => {
lomplayToast({ message, type });
  }, []);

这些组件已经可以工作，并且可以按预期进行。但我无法做出好的类型声明。该Toast接口带有几个接口和类型声明。其中之一是ToastOptionsdisplayIcon 能够检索的类型。我的问题：

  1. 为什么toast[type]属性会抛出“类型'{（消息：ToastContent，类型：TypeOptions | undefined）：ReactText; ...”上不存在属性'default'？这个默认属性是从哪里来的？
4

1 回答 1

0

有两个地方可以在函数上声明类型。

  1. 您可以声明道具的类型。
  2. 您可以为函数返回的内容声明一个类型，a ReturnType。

看起来像这样

const yourFunction = (props: PropType): ReturnType => { ... }

您将您的声明ToastProps为ReturnType.

做这个：

const myToast = ({ type, message }: ToastProps) => { ... }

代替：

const myToast = ({ type, message }): ToastProps => { ... }

这是一个非常微妙的变化。

注意：这适用于任何函数，但 React 有自己的函数类型。你可以像这样输入一个 React 组件函数：

const myToast: React.FunctionComponent<ToastProps> = ({ message, type }) => { ... }

在幕后，它将创建如下内容：

const myToast = (props: ToastProps): JSX.Element => { ... }
// It does some more stuff, but I simplified it for this example.
于 2021-04-26T13:41:51.383 回答