从反应组件调用外部 Javascript 函数答案

【问题标题】：Call external Javascript function from react components从反应组件调用外部 Javascript 函数
【发布时间】：2016-01-29 10:22:03
【问题描述】：

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

非常感谢任何帮助。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在 index.html 中

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

在你的组件中

componentWillMount() {
  window.test();
}

【讨论】：

外部方法如何调用请告诉我
这不起作用。 "window.test()" 被 typescript 标记为未知并且不会编译。
刚刚完美运行！
window 在 typescript 中不被识别

【解决方案2】：

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

在 index.html 或 some_site.js 中

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

然后，从你的反应组件：

window["pass_function"]();

当然，你可以传递一个参数：

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

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

【讨论】：

我在尝试执行此操作时收到以下错误：Element implicitly has an 'any' type because index expression is not of type 'number'。要解决此问题，您必须将 window 转换为 (window as { [key: string]: any})["pass_function"]()

【解决方案3】：

所以要么你在全局范围（又名窗口）上定义方法。然后你可以通过任何方法使用它，无论是否 React。

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

对于较大的项目，后者更好，因为它可以扩展，而如果您需要演示或 POC，您当然可以将所有内容都连接到全局范围，它会起作用。

更多关于模块的信息在：http://exploringjs.com/es6/ch_modules.html

【讨论】：

【解决方案4】：

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

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

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

【讨论】：