Question

我在这里机智。我刚刚在React中建立了一个网站。但是，我网站的最后一部分来自第三方。我原本期望某种api调用，但是却收到了一个js标记，该标记呈现了我的系统所需的元素。该脚本标签是与预订系统挂钩的cdn类型链接。我尝试过使用angerousedSetInnerHtml和无数其他声称允许您将脚本标签插入组件的插件。但是，虽然代码中包含标签（至少在检查模式下可见），但标签仍未呈现任何内容。我尝试将相同的标签放入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>元素。

您将必须手动创建脚本元素，并通过诸如appendChild

之类的本机方法将其附加到DOM。

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

危险地SetInnerHtml仍不rendeirng脚本

1 个答案: