Я работаю в проекте, где мне нужно использовать код widget_api, предоставленный RIPE Stat , чтобы интегрировать графический виджет в компонент React. Например, в HTML5 я бы сделал это так, и он отлично работает.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget</title>
</head>
<body>
<script src="https://stat.ripe.net/widgets/widget_api.js"></script>
<div class="statwdgtauto">
<script>
ripestat.init("rir-geo",{"resource":"80.12.67.0/24"},null,{"size":"500","disable":["controls"]})
</script>
</div>
</body>
</html>
Во время исследования я обнаружил это react-safe библиотека, которая позволяет делать то же самое в React
Вот код моего индексного файла.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>MyWHOIS</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="bd-home">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./js/polyfill.js" defer ></script>
<script src="https://stat.ripe.net/widgets/widget_api.js" async></script>
</body>
</html>
И компонент, который я создал для ...
import React, { Component } from 'react';
import Safe from "react-safe";
export default class EmbedComponent extends Component {
constructor(props){
super();
/*
const widget_api = document.createElement("script");
widget_api.src = "https://stat.ripe.net/widgets/widget_api.js";
widget_api.async = true;
document.body.appendChild(widget_api);
*/
}
render() {
const params1 = {"family":4,"warnings":1,"delegated":1,"resource":"FR"};
const params2 ={"resource":"127.0.0.1/24"};
const control = {"size":"500","disable":["controls"]};
return (
<div>
<h4>Include Embed</h4>
<div className="statwdgtauto">
<Safe.script>
{`ripestat.init("rpki-by-country",${params1},null,${control})`}
</Safe.script>
<Safe.script>
{`ripestat.init("rir-geo",${params2},null,${control})`}
</Safe.script>
</div>
</div>
)
}
}
У меня есть ошибки, когда я включаю файл с тегом с помощью asyn c или defer, у меня возникает ошибка cors
Блокировка парсера, кросс-сайт (т.е. разные eTLD + 1 ) скрипт`` вызывается через document.write. Сетевой запрос для этого сценария МОЖЕТ быть заблокирован браузером при загрузке этой или будущей страницы из-за плохого сетевого подключения. Если заблокирована загрузка этой страницы, это будет подтверждено в следующем сообщении консоли. Подробнее см.
И без defer или asyn c У меня проблема с записью в документе
Не удалось выполнить 'write' в 'Document' : Невозможно выполнить запись в документ из асинхронно загруженного внешнего скрипта, если он не открыт явно. widget_api. js: 90