我无法在 app.js React 中加载外部 Js 文件

问题描述 投票:0回答:1

我正在尝试在 React 应用程序中导入引导程序模板。 src/assets/js 文件夹中的所有外部 js 文件。 而且我不想将外部 JavaScript 文件放在公用文件夹中。

已经尝试使用 react-helmet 和 react-script-tag 但这些都不起作用。

   `<Helmet>
    <script
      src="./assets/vendor/jquery/jquery.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
      async
    ></script>
    <script src="./assets/vendor/jquery.easing/jquery.easing.min.js"></script>
    <script src="./assets/vendor/php-email-form/validate.js"></script>
    <script src="./assets/vendor/waypoints/jquery.waypoints.min.js"></script>
    <script src="./assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
    <script src="./assets/vendor/venobox/venobox.min.js"></script>
    <script src="./assets/vendor/owl.carousel/owl.carousel.min.js"></script>
    <script src="./assets/vendor/aos/aos.js"></script>
    <script src="./assets/js/main.js"></script>
  </Helmet>`

这些都应该在 index.js 或 app.js 中,而不是在 index.html 中

reactjs
1个回答
0
投票

如果你想在 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;

没有钩子和类组件

componentDidMount () {
  const script = document.createElement("script");
  script.src = url;
  script.async = true;
  document.body.appendChild(script);
}
© www.soinside.com 2019 - 2024. All rights reserved.