React+TS项目中react-toastr使用报错，求完整可行示例

I’ve run into this exact issue before—react-toastr has a few easy-to-miss dependencies and setup steps that trigger this error. Let’s break down why it’s happening and fix it with a complete working example.

Why You’re Seeing This Error #

The root cause is almost always one of two things:

1. Missing dependencies: react-toastr is a wrapper around the original toastr library, which relies on jQuery. If you don’t have both installed and available globally, the underlying class initialization fails, throwing that "call a class as a function" error.
2. Incorrect component usage: You might be trying to use ToastMessageAnimated directly instead of passing it as a configuration prop to the ToastContainer.

Step 1: Install All Required Dependencies #

First, make sure you have everything installed (including TypeScript types):

npm install react-toastr jquery toastr
npm install --save-dev @types/toastr @types/jquery

Step 2: Complete Working Component Example #

Here’s a fully functional RegistrationSelectionPage component that follows the correct pattern:

import React, { useRef, useEffect } from 'react';
import { ToastContainer, ToastMessageAnimated } from 'react-toastr';
// Import critical CSS files for proper styling
import 'toastr/build/toastr.min.css';
import 'react-toastr/lib/css/react-toastr.min.css';
// Import jQuery and make it available globally (required by toastr)
import $ from 'jquery';

(window as any).$ = $;

const RegistrationSelectionPage: React.FC = () => {
  // Ref to access the ToastContainer's toast methods
  const toastRef = useRef<ToastContainer>(null);

  // Show a welcome toast when the component mounts
  useEffect(() => {
    if (toastRef.current) {
      toastRef.current.success(
        'You can now select your registration type!',
        'Welcome',
        {
          timeOut: 3000, // Auto-close after 3 seconds
          extendedTimeOut: 1000, // Extra time if user hovers
          progressBar: true,
        }
      );
    }
  }, []);

  // Handler to show an error toast
  const handleRegistrationError = () => {
    if (toastRef.current) {
      toastRef.current.error(
        'Please choose a registration option before proceeding.',
        'Selection Required',
        {
          timeOut: 5000,
          closeButton: true,
        }
      );
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Registration Selection</h1>
      <button 
        onClick={handleRegistrationError}
        style={{ padding: '0.5rem 1rem', marginTop: '1rem' }}
      >
        Try Proceeding Without Selection
      </button>

      {/* Toast Container - this is where all toasts render */}
      <ToastContainer
        ref={toastRef}
        toastMessageElement={ToastMessageAnimated} // Pass the animated component here
        position="top-right"
        newestOnTop={true}
      />
    </div>
  );
};

export default RegistrationSelectionPage;

Key Notes to Avoid the Error Again #

• Don’t render ToastMessageAnimated directly: Instead, pass it to the toastMessageElement prop of ToastContainer—this tells the container what component to use for rendering individual toasts.
• jQuery must be global: The original toastr library expects window.$ to exist, so we assign it explicitly after importing.
• Include CSS: Skipping the CSS files won’t cause the error, but your toasts will look broken and unreadable.
• Use the container ref to trigger toasts: All toast actions (success, error, info, warning) are called via the ToastContainer ref, not by rendering components manually.

内容的提问来源于stack exchange，提问作者olefrank