问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Next.JS 使用 <script> 实现外部“.js”

社区维基
1
新手上路，请多包涵

我正在使用 Next.Js 构建一个网站，我试图实现一个外部 .js 文件（Bootstrap.min.js 和 Popper.min.js），但它没有显示。我不确定是什么问题！

我是这样实现的：

 import Head from 'next/head';

//partials
import Nav from './nav'

const Layout = (props) => (
<div>
    <Head>
        <title>Site</title>

        {/* Meta tags */}
        <meta charset="utf-8"></meta>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"></meta>

        {/* Standard page css */}
        <link rel="stylesheet" type="text/css" href="/static/css/page.css"/>

        {/* Bootstrap CSS */}
        <link rel="stylesheet" href="/static/includes/bootstrap.min.css"/>

        {/* jQuery first, then Popper.js, then Bootstrap JS */}
        <script src="/static/includes/popper.min.js"></script>
        <script type="text/javascript" src="/static/includes/bootstrap.min.js"></script>

    </Head>
    <Nav/>
    {props.children}
</div>
);

export default Layout;

我觉得好看？我错过了什么，它没有像它应该的那样投射！

当我在页面内尝试脚本时，它会在很短的时间内显示“Hello JavaScript”，然后就消失了？

 <p id="demo"></p>
<script>document.getElementById("demo").innerHTML = "Hello JavaScript";</script>

我如何解决它？

请帮忙！

我正在使用：“next”：“^8.0.3”，“react”：“^16.8.4”，“react-dom”：“^16.8.4”

原文由 GijsHeg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlreactjsnext.jsreact-dom
阅读 2.9k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可以使用来自 --- Script 的 next/script 标签导入外部 .js 文件。

以下是我的一个项目中的示例片段。由于一些 DOM 操作，我不得不在页面末尾导入脚本，所以 Script 标签工作得非常好:)

 import Script from "next/script";
import Content from "../components/Content";
import Header from "../components/Header";

const index = () => {
  return (
    <div>
      <Header />
      <Content />
      <Script type="text/javascript" src="./assets/js/main.js" />
    </div>
  );
};

export default index;

原文由 Tejas Shetty 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1
  1. 您需要将所有脚本放在 Head 标签中。
  2. 不要将原始 javascript 放在 Head 标签内。放在单独的文件中，在 Head 标签中导入脚本

您可以在 --- public 文件夹中创建一个 .js 文件，其中包含您的原始 js 代码，然后使用 Head tag- 中的脚本我不确定为什么我们必须这样做，但这就是它在 Next.js 中的工作方式

因此，对于您的问题，这将起作用：

public/js/myscript.js

 document.getElementById("demo").innerHTML = "Hello JavaScript";

Layout.js

 import Head from 'next/head';

const Layout = (props) => (
<div>
    <Head>
        {/* import external javascript */}
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="/js/myscript.js"></script>
    </Head>
    <p id="demo"></p>
</div>
);

export default Layout;

原文由 GunnerFan 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题