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

Question

我可以帮您翻译成中文。这段内容是关于编程的，讲述了如何从JavaScript函数调用React组件函数。在初始阶段，需要从JavaScript函数而不是React中调用已声明的函数。作者知道如何从React函数调用JavaScript函数。下面是JavaScript代码：

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

React

componentWillMount() {
  window.test();
}

但在我的情况下，我希望完全相反的过程，需要由于某些插件初始化从JavaScript调用React函数。

我查看了其他相关主题，但没有得到确切的答案。那么我该怎么做呢？

- ankitkanojia

---

window.fn = function(){} 在React中定义，如果存在则在JS中调用。 - FrV

Answer 1

您可以将函数分配给 window 对象作为函数，并从您的脚本中调用它。因此，您需要执行以下操作：

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

然后您可以这样从脚本中调用它：

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

诚然，我不知道你计划如何使用这个，但这是利用全局window对象实现你想要的方式之一。第二部分需要在一个非常规范的例子中确定React组件是否已挂载，或者只需检查方法是否存在后再调用它。

- etarhan

---

谢谢您的回复，让我试一下。 - ankitkanojia

实际上，我有自定义操作的HTML5音频控件功能，因此React不支持或处理事件，所以我必须使用JavaScript代码来处理事件，因此我需要调用JavaScript到React函数和React到JavaScript函数。反之亦然... - ankitkanojia

如果我的回答没有完全涵盖您需要的内容，请考虑在原帖中添加更多关于您确切用例的细节。 - etarhan

我已经完成了所有的定制需求，现在我只需要从JavaScript函数中调用React组件的函数。因此，我认为这是可以分享的可行信息。 - ankitkanojia