在 NextJS 中不使用 props 或 context 将脚本标签添加到 React 组件

Question

I want to add a library to my React component as a script tag.我想将一个库作为脚本标签添加到我的 React 组件中。 I'm doing this currently by calling an API in an _app.tsx file then accessing the value in a _document.tsx file.我目前通过在 _app.tsx 文件中调用 API 然后访问 _document.tsx 文件中的值来执行此操作。 Within _document.tsx I add the script tag to the document head by passing it to a custom component.在 _document.tsx 中，我通过将脚本标签传递给自定义组件来将其添加到文档头部。

My ultimate goal is to remove it from NEXT_DATA (I'm working on a SSR Next JS app).我的最终目标是从 NEXT_DATA 中删除它（我正在开发 SSR Next JS 应用程序）。

Any ideas?有任何想法吗？ I've looked into using window, but have not had success there.我已经研究过使用 window，但在那里没有成功。

Note: Updated question for clairty.注意：更新了 clairty 的问题。

Answer 1

You can use the Next.js Head tag from anywhere in your app to achieve loading a script.您可以在应用程序的任何位置使用 Next.js Head标签来实现加载脚本。

For example:例如：

    import Head from 'next/head';
    
    function MyLibraryLoader() {
        return (
            <Head>
                <script src="..." type="text/javascript" />
            </Head>
        )
    }

More about the Head tag can be found here: https://nextjs.org/docs/api-reference/next/head可以在此处找到有关 Head 标签的更多信息： https://nextjs.org/docs/api-reference/next/head

在 NextJS 中不使用 props 或 context 将脚本标签添加到 React 组件

问题描述

1 个解决方案

解决方案1
0 2021-06-05 20:30:34

在 NextJS 中不使用 props 或 context 将脚本标签添加到 React 组件

问题描述

1 个解决方案

解决方案1 0 2021-06-05 20:30:34

解决方案1
0 2021-06-05 20:30:34