Question

这是一个react.js应用程序，下面的代码在index.html上有效，但在JSX上无效，我需要存储回调中的信息，如果我可以使该脚本标签正常工作，那将更容易，我尝试导入使用两个第三方库的src文件没有成功

    <ScriptTag type="text/javascript" 
    src="https://cdn.paddle.com/paddle/paddle.js" />

    <Script
      url="https://cdn.paddle.com/paddle/paddle.js"
      onCreate={this.handleScriptCreate.bind(this)}
      onError={this.handleScriptError.bind(this)}
      onLoad={this.handleScriptLoad.bind(this)}
    />

'Paddle'未定义为un-undef

这是HTML：

<script type="text/javascript">
  Paddle.Setup({
    vendor: 123456,
     completeDetails: true
  });
</script>

我知道我没有导入Paddle，但不确定如何执行此操作。在纯HTML上，它将自动导入paddle.js。为什么不加载JSX？

 checkout() {
    console.log('checkout');
    Paddle.Setup({
      vendor: 49773,
      completeDetails: true
    });
    Paddle.Checkout.open({
      product: 12345,
      email: "jane@paddle.com",
      passthrough: 1939284,
      successCallback: function (data) {
        console.log(data);
        alert('Thanks for your purchase.');
      },
      closeCallback: function (data) {
        console.log(data);
        alert('Your purchase has been cancelled, we hope to see you again soon!');
      }
    });
  }

https://paddle.com/docs/paddle-checkout-web/

Answer 1

您可以通过使用componentDidMount并将脚本标签附加到网站正文中来实现

componentDidMount () {
    const script = document.createElement("script");

    script.src = "https://cdn.paddle.com/paddle/paddle.js";
    script.async = true;

    document.body.appendChild(script);
}

Answer 2

即使脚本标签正确导入，模块也不能在JSX中使用。

将脚本标签导入React应用（未定义）

2 个答案: