如何使用 document.body.appendChild 将对象添加到脚本标签

Question

我有一个用 asp.net MVC 编写的网站，我正在尝试用 React 复制它

在某些页面中，我有这个脚本标签：

@section Scripts

{

    <script src="https://some.url.that.returns.an.object.com">

            {

                loginURL: 'http//:blahBlah/login',

                logoutURL: 'http://blahBlah/Logout'

            }

    </script>

}

到目前为止，我设法在该特定页面上创建脚本标签，但我不知道如何添加该 loginUrl 和 logoutUrl

用这个代码做到了：

useEffect(() => {

    const script = document.createElement('script')

    script.src = `https://some.url.that.returns.an.object.com`

    script.async = true

    script.onload = () => scriptLoaded()

    document.body.appendChild(script)

  })

我怎样才能添加这些网址？

我的应用程序是用 ReactJS 编写的，在 React 中有什么方法可以让我做得更好吗？

Answer 1

要设置标签的文本内容script，请使用textContent（或innerText用于过时的浏览器）：const script = document.createElement('script')script.src = `https://some.url.that.returns.an.object.com`script.textContent = `{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loginURL: 'http//:blahBlah/login',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; logoutURL: 'http://blahBlah/Logout'&nbsp; &nbsp; &nbsp; &nbsp; }`;script.async = truescript.onload = () => scriptLoaded()但：当标签中有文本script并且标签有script时src，其中的文本只是“文档”。有可能被引用的脚本src可以确定它从哪个script标签加载并可以使用该内容，但是如果您动态创建脚本，它的执行方式可能不起作用。这不太可能是您希望在 React 项目中执行此操作的方式。在 React 中，您几乎从不想直接操作 DOM。它有时会出现，但总的来说，你会尽量避免它。