javascript - React-toastr 3 与 typescript

Question

尝试在我的react/TS应用程序中使用react-toastr。但提供的示例( https://tomchentw.github.io/react-toastr/ )不起作用。

我像这样导入:

import { ToastContainer, ToastMessageAnimated } from "react-toastr";

并像这样使用:

class RegistrationSelectionPage extends React.Component<{}, {}> {

 public render() {
    let container: ToastContainer | null;

    return (
      <section className="RegistrationSelectionPage">
        <ToastContainer
          ref={ref => container = ref}
          className="toast-top-right"
          toastMessageFactory={ToastMessageAnimated}
        />
        <button onClick={() => container && container.warning('No connection', 'Error!')}>Click me</button>
...

我收到此错误:

Uncaught TypeError: Cannot call a class as a function
    at ./node_modules/babel-runtime/helpers/classCallCheck.js.exports.default 
...

我应该在 ToastMessageAnimated 上调用哪个函数？

请提供完整的工作示例，谢谢:)

Answer 1

@types 不正确，看起来它们已经允许 any对于 toastMessageFactory prop 来避免对正确类型的误解，从而导致各种困惑

从文档来看，它需要一个 React 工厂函数 https://tomchentw.github.io/react-toastr/#toastmessage

默认值为React.createFactory(ToastMessageAnimated)这是从 lib 中定义的 Component 类创建的工厂函数。这确实满足您当前的目的，但当前的定义强制您指定它，并接受 any这完全违背了这一点，所以让我们看看修复 defs

从默认值我们可以推断出 toastMessageFactory 的类型应该是React.Factory<ToastMessageProps>这是库中组件类之一的工厂，具有基本的 ToastMessageProps

查找源代码中的 props 和组件(很高兴使用 Flow 编写，因此这变得更加容易)我们可以改进 @type/react-toastr定义为...

import { Component, ReactHTML, Factory, ReactNode } from 'react'

export interface ToastContainerProps {
  toastType?: IconClassNames
  id?: string
  preventDuplicates?: boolean
  toastMessageFactory?: Factory<ToastMessageProps>
  newestOnTop?: boolean
  onClick?: Function
}

export class ToastContainer extends Component<ToastContainerProps> {
    error: <P extends ToastMessageProps>(message: ReactNode, title: ReactNode, optionsOverride?: Partial<P>) => void
    info: <P extends ToastMessageProps>(message: ReactNode, title: ReactNode, optionsOverride?: Partial<P>) => void
    success: <P extends ToastMessageProps>(message: ReactNode, title: ReactNode, optionsOverride?: Partial<P>) => void
    warning: <P extends ToastMessageProps>(message: ReactNode, title: ReactNode, optionsOverride?: Partial<P>) => void
    clear: () => void
}

export interface IconClassNames {
    error: string
    info: string
    success: string
    warning: string
}

export interface ToastMessageProps {
    className?: string,
    type: string,
    iconClassNames?: IconClassNames,
    iconClassName?: string,
    closeButton?: boolean,
    onCloseClick?: Function,
    title?: any,
    titleClassName?: string,
    message?: any,
    messageClassName?: string
}

export interface ToastMessageAnimatedProps extends ToastMessageProps {
    className?: string,
    showAnimation?: string,
    hideAnimation?: string,
    timeOut?: number,
    extendedTimeOut?: number,
    tapToDismiss?: boolean,
    onRemove: Function,
    onClick?: Function,
    onCloseClick?: Function,
}

export interface ToastMessageQueryProps extends ToastMessageProps {
  style?: object,
  showMethod?: string,
  showDuration?: number,
  showEasing?: string,
  hideMethod?: string,
  hideDuration?: number,
  hideEasing?: string,
  timeOut?: number,
  extendedTimeOut?: number,
  tapToDismiss?: boolean,
  onRemove: Function,
  onClick?: Function,
  onCloseClick?: Function,
}

export class ToastMessageAnimated extends Component<ToastMessageAnimatedProps> {}
export class ToastMessageQuery extends Component<ToastMessageQueryProps> {}

您现在可以在自己的组件中使用正确键入的这些...

import { 
  ToastContainer, 
  ToastMessageAnimated,
  ToastMessageAnimatedProps // import this too for stricter typing of factory
} from "react-toastr"

//... all exactly same as your example, except...

<ToastContainer ref={ref => container = ref}
                toastMessageFactory={React.createFactory<ToastMessageAnimatedProps>(ToastMessageAnimated)}
                />
<button onClick={() => container && container.warning<ToastMessageAnimatedProps>('No connection', 'Error!', {className: 'toast-top-right'})}>Click me</button>

这里我们还严格输入警告选项，并设置 className在其中(这被错误地设置为容器 Prop ，因此不会被应用)

现在还允许您将 JSX 组件作为消息和标题传递

container.warning<ToastMessageAnimatedProps>(<div>No connection</div>, <h1>Error!</h1>, {className: 'toast-top-right'})