Добавление тега сценария JS в React
У меня есть файл script.js на сервере, который написан на чистом javascript (ванильном) и возвращает HTML-форму с некоторыми функциями.
Я загружаю его по первому тегу <script> и использую функции из script.js во втором теге <script> в файле .html, и он работает. Но я не знаю, как заставить его работать в React. Я пытался сделать так, но не работает.
script.js
var lib = lib || (function() {
var _args = {};
return {
init: function(Args) {
_args = Args;
},
func: function() {
...some logic and use document.write
for render
}
}
}())В HTML это работает
<script src='http://someurl.com/checkout'></script>
<script>
lib.init(...some args);
lib.func();
</script>
В React это не работает
import React, {
Component
} from 'react';
import axios from "axios";
class Checkout extends Component {
state = {}
componentDidMount = async() => {
axios.get("http://someurl.com/checkout")
.then(res => {
const scriptInit = document.createElement("script");
scriptInit.src = "http://someurl.com/checkout";
// or scriptInit.text = res.data;
scriptInit.type = "text/javascript";
scriptInit.async = true;
const scriptFunc = document.createElement("script");
scriptFunc.text = "lib.init(...); lib.func();";
scriptFunc.async = true;
const script = scriptInit.outerHTML + scriptFunc.outerHTML;
this.setState({
script
});
})
}
render() {
const __html = this.state.script || "";
return <div id = "checkout"
dangerouslySetInnerHTML = {
{
__html
}
}
/>
}
}
export default Checkout;Рендеринг тега div со всеми тегами скрипта, но с разрешением 1110 x 0
Я пробовал script*.innerHTML, но он возвращает код js из script.js.
@MoshFeu Это пишется, когда я открываю вкладку «Элементы» Chrome devtools (F12)
Имеет смысл. Но я все же пытаюсь понять, в чем дело. Неужели скрипт не работает?
Написано, что вы имеете в виду, что это размер скрипта или тег div, содержащий его? Если это так, это не имеет значения, потому что сценарий не должен иметь размерности.
Он не отображает (или не может использовать функции из script.js) или загружает данные script.js
Я хочу добавить тег <script> в React DOM в файле .js или .jsx, потому что проект React состоит только из одного корневого файла /public/index.html.
Возможно, это мог бы это объяснить.
@MoshFeu Я меняю document.write на document.createElement и document.body.appendChild и т. д. В script.js - он работает в html, но не в React.
вы используете какую-то библиотеку в своих вещах javascript? потому что это должно работать, так как реакция является базой javascript. Возможно, вам нужно перевести ваш чистый js в реагирующий код
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно вызвать функции после загрузки вашего скрипта. Для этого вам не понадобятся аксиомы, вы можете добиться этого, используя обратный вызов onload для загрузки скрипта.
componentDidMount(){
const script = document.createElement("script");
document.head.appendChild(script);
script.src = "http://someurl.com/checkout";
script.async = true;
script.onload = () => this.runScriptMethods();
}
runScriptMethods(){
lib.init(...);
lib.func()
}
Но если мой скрипт отображает некоторые элементы с помощью document.write и должен быть в теле, а функции lib реализованы в script.js?
Спасибо, работает, но только с помощью eval("lib.init()...") в runScriptMethods() - не очень
Нет, это нехорошо, и я не уверен, зачем вам нужен eval. Если вы пытаетесь запустить его без (например, lib.init()), что происходит?
@MoshFeu 'lib' не определен. Поскольку объект lib определен в script.js на другом URL-адресе/сервере
Это не имеет значения, пока скрипт выполняется в контексте веб-сайта. И, конечно же, это не будет отличаться от запуска с eval.
Что вы подразумеваете под
but with 1110 x 0 resolutionтем, как решение относится к проблеме со сценарием?