Question

我正在尝试在React组件的中间加载一个外部脚本。

import React from 'react';

class Test extends React.Component {

  componentDidMount() {
    const script = document.createElement("script");
    script.src = "http://example.com/form.js";
    this.myDiv.appendChild(script);
  }

  render() {
    return <div ref={e => (this.myDiv = e)} />;
  }
}

不幸的是，外部脚本包含document.write。因此，当我尝试加载它时，它给了我一个错误：

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

该错误很容易理解。由于脚本是在解析文档后运行的，因此无法使用document.write。

我可以采取哪些补救措施？

我到目前为止所做的事情：

到目前为止，我已经尝试使用Krux的postscribe模块，但未能使其工作：

import React from 'react';

class Test extends React.Component {

  render() {
    return (
      <div>
        <div id="myDiv" />
        <script dangerouslySetInnerHTML={{
          __html: postscribe(
            "#myDiv",
            <script src="http://example.com/form.js" />
          )
        }} />
      </div>
    );
  }
}

非常感谢任何帮助

Answer 1

您可以使用“ react-async-script-loader ” npm模块。

此模块有助于在组件中延迟加载脚本。

或者在React-component-lifecycle中，您可以执行以下操作：

document.createElement('script');
        asyncScript.src = 'your script url';
        asyncScript.async = true;
        asyncScript.onload = () => {
          // The setTimeout lets us pretend that Stripe.js took a long time to load
          // Take it out of your production code!
          setTimeout(() => {
            this.setState({
              stateVariable: **window.{your script exposed object}**
            });
          }, 500);
        };

反应-加载外部脚本给我错误：无法在“文档”上执行“写入”

1 个答案: