Question

我不确定之前是否曾经问过这个问题，或者是否有人在reactjs上遇到过同样的问题。所以场景是这样的，我有一个包含一些javascript的 index.html 文件。现在在我的react组件上，我有一个只有在条件为真时才会呈现的条件。这意味着，最初当我的页面加载时，组件尚未呈现。当我切换按钮时，这是该组件被渲染的地方。该子组件需要调用我的index.html中包含的javascript方法。我该怎么做？

非常感谢任何帮助。

Answer 1

在index.html中

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

在您的组件中

componentWillMount() {
  window.test();
}

Answer 2

因此要么在全局范围（aka窗口）上定义方法。然后你可以从任何方法使用它，无论是否是React。

或者您可以切换到基于模块的范例，并使用require / import来获取模块并使用该功能。

对于较大的项目，后者更好，因为它的规模，而如果你需要一个演示或POC，你当然可以挂钩全球范围，它将工作。

有关模块的更多信息，请访问：http://exploringjs.com/es6/ch_modules.html

Answer 3

尝试以下解决方案在启用TypeScript的情况下从React调用全局函数：

在index.html或some_site.js中

function pass_function(){
  alert('42');
}

然后，从您的react组件中

：

window["pass_function"]();

当然，您可以传递参数：

//react
window["passp"]("react ts");

//js
function passp(someval) {
  alert(`passes parameter: ${someval}`);
}

Answer 4

您可以将方法附加到全局窗口对象，然后像在组件中那样使用它：

<button onClick={this.howItWorks} type="button" className='btn'>How it Works</button>

howItWorks = () => {
  window.HowItWorksVideo();
}

从react组件调用外部Javascript函数

4 个答案: