使用 React 钩子添加脚本

Question

我正在尝试将内联脚本添加到 React 组件：我有我的自定义钩子：

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, [url]);
};

export default useScript;

我这样使用：

import useScript from 'hooks/useScript';

const MyComponent = () => {
  useScript('path/to/my.js');
}

SPA 导航事件后添加到文档中的脚本，但它不会在不重新加载页面的情况下将事件添加到我的按钮。

Answer 1

我在其中一个添加的脚本中遇到了问题。 我改变了添加脚本的方式。 我在js中导出了function，然后在我的组件中导入了这个function，然后我使用了useEffect。

import { MyFunction } from './myscript.js';

const MyComponent = () => {
    
    useEffect(() => {
        MyFunction();              
     }, []);
    
    return(
       ......
    )