dangerouslySetInnerHtml仍未呈现脚本

Question

我在这里束手无策。我刚刚在React中建立了一个网站。但是，我的网站的最后一部分来自第三方。我期待着某种类型的api调用，但却收到了一个js标记，该标记呈现了他们的系统所需的元素。此脚本标记是与预订系统挂钩的cdn类型链接。我尝试过使用dangerouslySetInnerHtml和许多其他插件，它们声称允许您将脚本标记插入到组件中。然而，尽管标记出现在代码中(至少当我在inspect模式下查看时)，它仍然没有呈现任何内容。我试过将相同的标签放入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>元素时，这些属性/方法不会执行when元素。

您必须手动创建脚本元素，并通过本机方法(如appendChild )将其附加到DOM

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