除非我专门刷新页面，否则脚本在 React、NextJS 项目中不起作用

Question

我不得不将一个基于纯 HTML、CSS 和 javascript 构建的大型代码库重构为 Z217C80CED5A5D14709CZ0 和 NextJSA86D14709CZ0 应用程序。 代码库有很多链接和脚本，其中一些脚本适用于所有页面，而一些脚本仅适用于特定页面。

在我所做的设置中，我创建了一个 Meta.js 文件，其中保存了所有链接和脚本，还创建了一个 Layout.js 文件，其中包含 Meta.js 以及应用于所有页面的通用导航栏和侧边栏布局.

我现在面临的问题是，除非刷新页面，否则某些脚本/功能不起作用。 例如，我从主页进入应用程序，即 index.js 文件，然后导航到设置页面，即 settings.js 文件。

settings.js 页面有一些选项卡，其中使用了一些脚本，但除非我重新加载页面，否则它将无法工作。 这可能是什么问题，我该如何解决。

以下是下面列出的一些重要文件：

元.js

import React from 'react'
import Head from 'next/head'
import Script from 'next/script'

const Meta = ({title, keywords, description}) => {
  return (
    <>
    <Head>
      <meta charSet="utf-8" />
      <meta content="Webflow" name="generator" />
    </Head>
    <Script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></Script>
    <Script src='/CustomScript.js'></Script>
    <Script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' strategy='beforeInteractive' crossOrigin="anonymous"></Script>
    <Script src='/webflow.js'></Script>
    <Script src='https://fengyuanchen.github.io/datepicker/js/datepicker.js'></Script>
    <Script src='https://cdn.jsdelivr.net/npm/flatpickr'></Script>
    <Script src='https://cdn.quilljs.com/1.3.6/quill.js' strategy='beforeInteractive'></Script>
    </>
  )
}

export default Meta

布局.js

import Nav from "./Nav";
import Meta from "./Meta";

const Layout = ({children}) => {
  return ( 
    <>
    <Meta />
    <Nav/>
    <div className="body">
      <main>
        {children}
      </main>
    </div>
    </>
   );
}
 
export default Layout;

_app.js

// styles
import '../styles/normalize.css'
import '../styles/webflow.css'
import '../styles/listwise.webflow.css'
import '../styles/styles.css'
// website constant layout
import Layout from '../components/Layout'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

导航.js

import React from 'react'
import Image from 'next/image'
import Link from 'next/link'

const Nav = () => {
  return (
    <div className="app-nav-layout">
            <Link href="#"><Image src="/listwise-logo-black-nospace.svg" width={130} height={130} alt="" className="left-navbar-logo" /></Link>
          </div>
          <nav role="navigation" className="left-navbar-menu w-nav-menu">
                  <Link href="/dashboard/listings/addListing">Create new listing</Link>
                <Link href="/">Dashboard<br/></Link>
                <Link href="/dashboard/listings/allListings"><a className="left-navbar-link w-nav-link"><span className="material-icons-round md-18 mr-8">list_alt</span> Listings<br/></a></Link>
                <Link href="/dashboard/settings/settings">Account settings</Link>
                <Link href="/dashboard/listings/myListwise">My Listwise</Link>
          </nav>
        </div>
  )
}

export default Nav

设置.js

import React, {useState} from 'react'
import Head from "next/head"
import Script from "next/script"

const settings = () => {

  return (
<>
<Head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css" />
    <Script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></Script>
    <Script src="https://unpkg.com/filepond/dist/filepond.min.js"></Script>
  </Head>

<div className="app-main-layout-container">
                  <div className="tabs-menu w-tab-menu">
                    <a data-w-tab="Personal" className="tab-link w-inline-block w-tab-link w--current">
                      <div className="material-icons-round md-24 icon-acc-settings">person</div>
                      <div className="tab-text">Personal profile</div>
                    </a>
                    <a data-w-tab="Business" className="tab-link w-inline-block w-tab-link">
                      <div className="material-icons-round md-24 icon-acc-settings">store</div>
                      <div className="tab-text">Business profile</div>
                    </a>
                    <a data-w-tab="Social" className="tab-link w-inline-block w-tab-link">
                      <div className="material-icons-round md-24 icon-acc-settings">share</div>
                      <div className="tab-text">Social links</div>
                    </a>
                  </div>
                  <div className="tabs-content w-tab-content">
                    <div data-w-tab="Personal" className="w-tab-pane w--tab-active">
                      <div className="w-form">
                        <form id="wf-form-profile" name="wf-form-profile" data-name="profile" method="get">
                          <div className="form-group"><label htmlFor="name-4" className="label">Upload profile photo</label>
                        </form>
                    </div>
                    <div data-w-tab="Business" className="w-tab-pane">
                      <div className="w-form">
                        <form id="wf-form-profile" name="wf-form-profile" data-name="profile" method="get">
                          <div className="form-group"><label htmlFor="name-4" className="label">Business name</label>
                            <div className="hint marginb--20px">This is usually the name you work under</div><input type="text" className="input w-input" maxLength="256" name="Business-Name" data-name="Business Name" placeholder="Enter business name" id="business-name" required="" />
                        </form>
                    </div>
                    <div data-w-tab="Social" className="w-tab-pane">
                      <div className="w-form">
                        <form id="wf-form-profile" name="wf-form-profile" data-name="profile" method="get">
                          <div className="form-group"><label htmlFor="instagram-link" className="label">Instagram profile link</label><input type="text" className="input w-input" maxLength="256" name="Instagram-Link" data-name="Instagram Link" placeholder="www.instagram.com/myname" id="instagram-link" /></div>
                        </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
      </div>
    </div>
</>
  )
}

export default settings

另外，我想问一下如何最好地渲染那些仅适用于特定页面的脚本，我应该将其添加到在应用程序初始渲染时加载的 Meta.js 文件中，还是创建一个单独的文件并将其添加到页面导航到时需要它的页面。

Answer 1

Nextjs 脚本组件可以采用strategy道具。 它有一个默认值afterInteractive ，这意味着脚本将首先加载主 javascript，这是在您在Script标签中链接的脚本之前页面变为交互式所必需的。

如果您需要提前加载任何脚本，因为您的页面的某些功能依赖于它，您需要将 strategy prop 设置为beforeInteractive ，如下所示：

<Script src=" ... " strategy="beforeInteractive" />

有关Next 文档的更多信息

Answer 2

我也面临这个问题，但目前我只是通过将所有脚本代码导入 useEffect 来解决这个问题，我在 useEffect 中删除我的脚本代码之前的所有事件

 useEffect(() => {
      $(document).ready(function () {
      var allElems = $('body').find('*');
      allElems.each(function () {
      var elm = this, //javascript DOM object
      $elm = $(this) //jquery object for element.
      $elm.off();
      // your script code here
   });
 });

Answer 3

你能解决吗？ 我目前面临同样的问题。

除非我专门刷新页面，否则脚本在 React、NextJS 项目中不起作用

问题描述

2 个解决方案

解决方案1
3 2022-04-18 12:18:37

解决方案2
0 2022-09-08 08:46:38

解决方案3
-3 2022-09-22 20:53:06

除非我专门刷新页面，否则脚本在 React、NextJS 项目中不起作用

问题描述

2 个解决方案

解决方案1 3 2022-04-18 12:18:37

解决方案2 0 2022-09-08 08:46:38

解决方案3 -3 2022-09-22 20:53:06

解决方案1
3 2022-04-18 12:18:37

解决方案2
0 2022-09-08 08:46:38

解决方案3
-3 2022-09-22 20:53:06