React项目中Sideshift嵌入按钮失效问题及正确实现问询

问题原因 #

React的onClick事件监听器要求传入函数引用，而非字符串形式的代码（这和原生HTML的onclick属性逻辑不同），所以你之前写的onClick="window.sideshift.show()"会触发类型错误。

正确实现方式 #

假设你已经在public/index.html的<head>中正确引入了Sideshift的嵌入脚本，比如：

<script src="https://sideshift.xyz/static/js/embed.js"></script>

方式1：直接使用箭头函数 #

在组件按钮中，把onClick绑定为箭头函数，直接调用window.sideshift.show()：

<button onClick={() => window.sideshift.show()}>打开加密货币转换工具</button>

方式2：定义独立处理函数（推荐） #

如果需要添加错误判断或扩展逻辑，建议单独定义处理函数，再绑定到onClick：

function YourComponent() {
  const openSideshift = () => {
    // 先判断Sideshift脚本是否加载完成，避免报错
    if (typeof window.sideshift !== 'undefined') {
      window.sideshift.show();
    } else {
      console.error('Sideshift嵌入脚本未加载，请检查index.html中的配置');
    }
  };

  return (
    <button onClick={openSideshift}>打开加密货币转换工具</button>
  );
}

export default YourComponent;

可选：添加自定义配置 #

如果需要预设交易对、固定方向等参数，可以在show()方法中传入配置对象：

<button onClick={() => window.sideshift.show({
  from: 'btc',    // 源币种
  to: 'usdt',     // 目标币种
  fixed: 'from',  // 固定源币种金额
  amount: '0.001' // 预设金额
})}>BTC转USDT</button>

内容的提问来源于stack exchange，提问作者jimmyblue