dangeriousSetInnerHtml все еще не обновляет скрипт

Question

Я в конце концов здесь.Я только что создал сайт в React.Но последняя часть моего сайта пришла от третьей стороны.Я ожидал какого-то вызова API, но вместо этого получил тег js, который отображает элемент, который мне нужен для их системы.Этот тег сценария является ссылкой типа cdn, которая подключается к системе бронирования.Я пытался использовать опасно SetInnerHtml и множество других плагинов, которые утверждают, что позволяют вставлять теги сценариев в компоненты.Однако, хотя тег присутствует в коде (по крайней мере, когда я смотрю в режиме проверки), он все равно ничего не рендерит.Я попытался поместить тот же тег в HTML, и он отлично работает, поэтому я знаю, что это как-то связано с самим компонентом.

import React from 'react';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Grid from 'react-bootstrap/lib/Grid';
import ScriptTag from 'react-script-tag';
import Safe from 'react-safe';

class ReservationForm extends React.Component{
  createMarkup = () => {
    return {__html: `<script LANGUAGE="Javascript" TYPE="text/javascript" SRC="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"></script>`}
  }
    render = () => {
      return (
        <Grid fluid>
          <Row className="reservation-form">
            <Col>
              <div dangerouslySetInnerHTML={this.createMarkup()} />
            </Col>
          </Row>
          <Row className="icon-nav-bar">
              <Col col={3}>
              </Col>
              <Col col={3}>
              </Col>
              <Col col={3}>
              </Col>
              <Col col={3}>
              </Col>
            </Row>
        </Grid>
      );
    }
}

export default ReservationForm;

Я, к сожалению, не могу включить здесь настоящий сценарий cdn, так как он содержит конфиденциальную информацию.Но любая помощь, которую я могу получить, будет высоко ценится!Спасибо!

Answer 1

Скорее всего, базовый код React использует innerHTML или подобное свойство / метод, который не выполняет элементы <script>, если они включены.

Вам придется вручную создать элемент сценария и добавить его в DOM с помощью встроенных методов, таких как appendChild

var script = document.createElement("script");
script.src = "http://example.com/script.js";
document.head.appendChild(script)