如何从 React 组件中触发外部普通 JS 函数？

Question

我正在 React 中构建一个应用程序并将其放置在我网站的页面上。

我的网站上有一个第三方聊天小部件/插件，希望在我的 React 组件中单击特定按钮时激活它。在 vanilla JS 中，这通常是通过以下函数完成的：

LiveChat.openChatWindow();

但是，我现在无法弄清楚如何从我的 React 组件中调用此函数。

我已经尝试过了

  const launchChat = () => {
    LiveChat.openChatWindow();
  }
// Other code

  <a class="btn chat-btn" onClick={launchChat}>Chat to us</a>

但是应用程序无法编译，因为当然，

LiveChat

未定义（在我的本地计算机上）。

我似乎也无法通过检测组件外部的点击来启动聊天，因为当然，该按钮是由 React 创建的，而不是在 DOM 中。

$(function(){
  $(".chat-btn").click(function(){
    LiveChat.openChatWindow();
  });
});

有人知道我应该怎么做吗？

Answer 1

您可以将

LiveChat

授予

window

范围，并且在 React 组件中只需从

window

访问它。

这是示例代码：

1. 您声明 LiveChat 变量的位置

window.LiveChat = ...

2. 在反应组件中

const launchChat = () => {
  window.LiveChat.openChatWindow();
}