Блог

Вот мой компонент React:

 import { foo } from './foo'

class MyComponent extends React.Component {
    componentDidMount() {
        this.initSpecialScriptTagSetup()
    }

    initSpecialScriptTagSetup() {
        const scriptElement = document.createElement('script')
        scriptElement.type = 'text/javascript'
        scriptElement.async = true
        scriptElement.src = somesource
        scriptElement.innerHTML = "foo(someargument)";

        // Insert the new map script element before the closing </body> tag
        const scripts = document.getElementsByTagName('script')
        const lastScriptElement = scripts[scripts.length - 1]
        lastScriptElement.parentNode.insertBefore(scriptElement, lastScriptElement.nextSibling)
    }

    render() {
        return (<div id="placeholder"></div>)
    }
}
 

Когда компонент монтируется, я хочу иметь возможность динамически вставлять и запускать специальную функцию foo , которая будет вставлять содержимое сторонней библиотеки в заполнитель div. В настоящее время мой компонент монтируется, и script тег вставлен правильно, но foo не вызывается. Вместо этого я попытался вызвать init в конструкторе, но это дало мне ошибки.

Любая помощь была бы очень признательна.

Javascript не позволит вам этого сделать. Лучшее, что вы можете сделать, это использовать эту eval() функцию.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

то есть, если вы хотите выполнить код из строки, но если вы хотите включить какой-то внешний файл сценария, то вы просто делаете то, что уже сделали.

1. Создать элемент скрипта
2. Установите атрибут источника
3. Добавьте элемент script где-нибудь в DOM