更新：如何在 NextJS 应用程序页面的特定位置插入脚本？

Question

我正在尝试将脚本嵌入到我的 next.js 应用程序中，但它位于页面的末尾，而不是我放置它的位置。

我已经采取了如何使用 Next Script 精确控制脚本标签插入位置中提到的解决方案，但问题仍然存在。我还尝试使用此处描述的应用程序脚本方法嵌入它https://nextjs.org/docs/basic-features/script，但我得到了相同的结果。

我的 helloworld.tsx 在页面中看起来像这样：

import React, { useRef } from 'react'
import Script from 'next/script'

export const HelloWorld = () => {

    const containerRef = useRef(null)

    function moveScript() {
        containerRef.current.appendChild(this)
    }

    return (
        <>
            <p>This goes before the embedding</p>
            <div ref={containerRef} id="script-container">
                <Script strategy="lazyOnload" id="asciicast-aMFGH8jU7O7uo94YZyWJEZtnO" type="text/javascript" src="https://asciinema.org/a/aMFGH8jU7O7uo94YZyWJEZtnO.js" async onLoad={moveScript}/>
            </div>
            <p>This goes after the embedding <br /></p>
        </>
    );
};
export default HelloWorld;

在结果页面上，嵌入位于页面底部，但我希望它位于两个段落之间。

我错过了什么？

Answer 1

为什么不使用 useEffect 来加载脚本，然后附加它？ 由于 useEffect 在组件渲染之后运行，您可以：

[1]使用它来加载其中的脚本（确保脚本加载在组件渲染之后进行），或者

[2] 之后使用它将脚本移动（附加）到特定的引用。我现在无法测试您的代码，但我很确定这可能会帮助您解决遇到的问题。

Answer 2

您可以利用 next/script 属性在任何页面中加载脚本，这对我有用。