如何在 React 页面上包含本地脚本文件？

Question

我正在我的React网站上实现barba JS ，但似乎无法让文件在页面上工作。 作为参考，我的文件夹结构如下：

theme
  pages
    Homepage.js
    Contact.js
  utils
    anim.js
    helpers.js
  index.js

在我的index.js文件中，我试图import我的anim.js脚本，以便将该文件应用于我的所有pages 。 但是，在编译时，即使定义了delay （因为我正在导入gsap ），我也会在anim.js上收到一个'delay' is not defined no-undef错误。

Homepage.js ( Contact.js类似，唯一不同的是data-barba-namespace )

import React from "react";
import LoadingScreen from "../components/LoadingScreen/LoadingScreen";
import Hero from "../components/Hero/Hero";

class Homepage extends React.Component {
  render(){
    return (
      <>
        <LoadingScreen />
        <div data-barba="container" data-barba-namespace="home">
          <Hero />
        </div>
      </>
    )
  }
}

export default Homepage;

动画.js

import { pageTransition, contentAnimation } from "./helpers";
import barba from '@barba/core';
import gsap from "gsap";

barba.init({
  sync: true,
  transitions: [{
    async leave(data){
      const done = this.async();
      pageTransition();
      await delay(1000);
      done();
    }, async enter(data){
      contentAnimation();
    }, async leave(data){
      contentAnimation();
    }}
  ]
});

helpers.js

export function pageTransition(){
  var timeline = gsap.timeline();
  timeline.to("loadingScreen",{
    duration: 1.2,
    width: "100%",
    left: "0",
    ease: "Expo.easeInOut"
  });
  timeline.to("loadingScreen",{
    duration: 1,
    width: "100%",
    left: "100%",
    ease: "Expo.easeInOut",
    delay: 0.3
  });
  timeline.set(".LoadingScreen", { left: "-100%" } );
}

export function contentAnimation(){
  var timeline = gsap.timeline();
  timeline.from("animate-this", {
    duration: 1,
    y: 30,
    opacity: 0,
    stagger: 0.4,
    delay: 0.2
  });
}

索引.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { pageTransition, contentAnimation } from "./utils/helpers";
import { barba } from '../node_modules/@barba/core';

import anim from "./utils/anim";
import "./scss/style.scss";

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

index.html （显示barba包装器）

<body data-barba="wrapper">
  <main id="root"></main>
</body>

Answer 1

您实际上可以将以下代码放在 useEffect 中以在您的 index.js 或您希望的任何文件中创建和加载脚本

useEffect(() => {

const script = document.createElement("script");
script.src = "localfilepath";
script.async = true;
script.defer = true;
document.body.append(script);

 }, []);

Answer 2

您的导入顺序看起来不对。 所有 node_modules 都应该在App.js等本地文件之前先导入

import React from "react";
import ReactDOM from "react-dom";
import { barba } from '../node_modules/@barba/core';


import { pageTransition, contentAnimation } from "./utils/helpers";
import anim from "./utils/anim";

import App from "./App";
import "./scss/style.scss";

或者您可以延迟导入模块并在加载成功时启动应用程序。

(async () => {
  // Dynamically imported module (runtime)
  await import('../node_modules/@barba/core');
  const root = document.getElementById("root");
  ReactDOM.render(<App />, root);
})();

阅读更多： https : //www.aleksandrhovhannisyan.com/blog/react-lazy-dynamic-imports/

如何在 React 页面上包含本地脚本文件？

问题描述

2 个解决方案

解决方案1
0 2021-10-10 17:45:48

解决方案2
0 2021-10-16 16:51:10

如何在 React 页面上包含本地脚本文件？

问题描述

2 个解决方案

解决方案1 0 2021-10-10 17:45:48

解决方案2 0 2021-10-16 16:51:10

解决方案1
0 2021-10-10 17:45:48

解决方案2
0 2021-10-16 16:51:10