如何在React.js中显示Bootstrap 5 Toast？

npm install bootstrap@next

import 'bootstrap/dist/css/bootstrap.min.css';
import { Toast } from 'bootstrap';

import React, { useRef } from 'react';

function MyComponent() {
  const toastRef = useRef(null);

  const showToast = () => {
    const toast = toastRef.current;
    if (toast) {
      const bsToast = new Toast(toast);
      bsToast.show();
    }
  };

  return (
    <div>
      <button onClick={showToast}>显示Toast</button>
      <div ref={toastRef} className="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div className="toast-header">
          <strong className="me-auto">Toast 标题</strong>
          <button type="button" className="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div className="toast-body">
          Toast 内容
        </div>
      </div>
    </div>
  );
}

export default MyComponent;