如何使用 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 = `{

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

            logoutURL: 'http://blahBlah/Logout'

        }`;

script.async = true

script.onload = () => scriptLoaded()

但：

1. 当标签中有文本script并且标签有script时src，其中的文本只是“文档”。有可能被引用的脚本src可以确定它从哪个script标签加载并可以使用该内容，但是如果您动态创建脚本，它的执行方式可能不起作用。

2. 这不太可能是您希望在 React 项目中执行此操作的方式。在 React 中，您几乎从不想直接操作 DOM。它有时会出现，但总的来说，你会尽量避免它。