如何正确地在React中扩展从外部站点加载的JS类

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

const ExternalComponent = () => {
  const [externalClass, setExternalClass] = useState(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://example.com/external.js';
    script.async = true;
    script.onload = () => {
      // 外部JS类加载完成后执行
      const external = new ExternalClass();
      setExternalClass(external);
    };
    document.body.appendChild(script);

    return () => {
      // 组件卸载时清理资源
      if (externalClass) {
        externalClass.cleanup();
      }
    };
  }, []);

  const handleButtonClick = () => {
    // 调用外部JS类的方法
    if (externalClass) {
      externalClass.someMethod();
    }
  };

  return (
    <div>
      <button onClick={handleButtonClick}>调用外部类方法</button>
    </div>
  );
};

export default ExternalComponent;