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

【问题标题】：Add script tag to React component without using props or context in NextJS在 NextJS 中不使用 props 或 context 将脚本标签添加到 React 组件
【发布时间】：2021-06-05 19:45:35
【问题描述】：

我想将一个库作为脚本标签添加到我的 React 组件中。我目前正在通过调用 _app.tsx 文件中的 API 然后访问 _document.tsx 文件中的值来执行此操作。在 _document.tsx 中，我通过将脚本标签传递给自定义组件来将其添加到文档头部。

我的最终目标是从 NEXT_DATA 中删除它（我正在开发 SSR Next JS 应用程序）。

有什么想法吗？我已经研究过使用窗口，但在那里没有成功。

注意：更新了 clairty 的问题。

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

您可以在应用中的任何位置使用 Next.js Head 标签来实现加载脚本。

例如：

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

更多关于 Head 标签的信息可以在这里找到： https://nextjs.org/docs/api-reference/next/head

【讨论】：

我认为这不能解决我的问题。我可以访问 getInitialProps 中的脚本以及我在其中执行 Axios 调用以检索值的位置。但是我需要将脚本添加到我的 Head 和 Body 组件中。我想在不使用道具或上下文的情况下将其传递给 Head 和 Body 组件。除非我误解了，否则你指给我的就是我已经在为头部和身体做的事情。我需要将脚本传递给函数。
为了添加更多上下文，我在自定义 _app 文件中调用 App.getInitialProps 中的 API。然后，我将调用中的值添加到在自定义 _document 文件中初始化的自定义 Head（文档/头）组件。
你能给出一个代码示例吗？我不确定我是否理解您要执行的操作。哪些值来自服务器？