我正在尝试在 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 中
如果你想在 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);
}