从外部JavaScript函数调用react组件的函数

Question

我正在尝试从javascript函数调用react组件的函数。在初始阶段，我想调用在react组件中声明的函数，而不是从react调用，而需要从javascript函数调用。

我知道如何从react函数调用javascript函数。像下面一样

JavaScript

<script type="text/javascript">
  function test(){
    alert('Function from index.html');
  }
</script>

反应

componentWillMount() {
  window.test();
}

但是对于我来说，我想要一个完全相反的过程，由于某些插件初始化，需要从javascript调用react函数。

我经历了其他相关主题，但未获得确切答案。那我该怎么办呢？

Answer 1

您可以将函数作为功能分配给 window 对象，然后从脚本中调用该函数。因此，基本上，您将执行以下操作：

componentWillMount() {
  window.reactFunction = () => {
    console.log('Test');
  }
}

然后从脚本中调用它，如下所示：

<script type="text/javascript">
  function test(){
    window.reactFunction()
  }
</script>

诚然，我不知道您打算如何精确地使用它，但这可能是通过利用全局 window 对象来实现所需功能的一种方式。第二部分实际上需要某种方法来确定react组件是否已安装（在一个非常简单的示例中），或者只是在调用该方法之前检查该方法的存在。