将外部脚本事件绑定到组件中的 html

Question

我正在尝试调用外部脚本

在public/index.html

<script src="https://embed.selly.gg"></script>

当我单击具有特定数据标记的按钮时，假设会调用一个事件。

在components/shop/ShopItem.js

<button className={classes.button} data-selly-product={product.id}>
    Buy
</button>

但什么也没发生。

如何将 embed.selly.gg 中的事件绑定到组件 html？

Answer 1

你可以做这样的事情：

componentDidMount () {
    const script = document.createElement("script");
    script.src = "https://embed.selly.gg";
    script.async = true;
    document.body.appendChild(script);
}

Answer 2

如果您使用函数简单地在挂载时 ping 父级并放置@piyush-Zalani的脚本注册方法有一个条件。如果脚本已加载，请不要再次加载。

商店物品.js

componentDidMount(){
  const { onMount } = this.props;
  onMount('https://embed.selly.gg');
}

商店.js

...
state = {}
handleCreateScriptTag = src => {
  const { loadedScripts } = this.state;
  if (loadedScripts && loadedScripts.indexOf(src) > -1) return;
  const script = document.createElement("script");
  script.src = src;
  script.async = true;
  document.body.appendChild(script);
  this.setState(prevState => ({
    loadedScripts: [...prevState.loadedScript, src]
  }))
}
render() {
  return (
    <ShopItem onMount={this.handleCreateScriptTag} />
  )
}