如何在 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