如何高效地向 React/JSX 组件添加脚本标签？-js教程-PHP中文网

如何高效地向 React/JSX 组件添加脚本标签？

Mary-Kate Olsen

发布： 2024-12-09 04:48:10

原创

1062 人浏览过

How to Efficiently Add Script Tags to React/JSX Components?

向 React/JSX 添加脚本标签

在 React/JSX 中，有多种方法可以合并内联脚本。一种可能的解决方案是在组件内创建一个函数，将脚本安装到 DOM 中。例如：

componentDidMount() {
  const script = document.createElement("script");
  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;
  document.body.appendChild(script);
}

登录后复制

但是，如果脚本已存在于 DOM 中或需要多次加载，则此方法并不理想。

更有效的方法是利用包像 npm 这样的管理器将脚本安装为模块。这简化了集成过程，并使脚本可以导入：

import {useEffect} from 'react';

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://use.typekit.net/foobar.js';
  script.async = true;
  document.body.appendChild(script);
  return () => {
    document.body.removeChild(script);
  };
}, []);

登录后复制

此技术可确保脚本在组件安装时仅加载一次，并在组件卸载时删除。

为了进一步增强这种方法，可以创建一个自定义挂钩来处理脚本加载过程：

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 = props => {
  useScript('https://use.typekit.net/foobar.js');
  // Rest of the component code
};

登录后复制

以上是如何高效地向 React/JSX 组件添加脚本标签？的详细内容。更多信息请关注PHP中文网其他相关文章！