как добавить объект в тег скрипта с помощью 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>
}

На данный момент мне удалось создать тег script на указанной странице c, но я не знаю, как добавить это 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)
  })

как я могу добавить эти URL?

мое приложение написано с 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. Иногда это происходит, но в целом вы пытаетесь избежать этого.