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

Call external Javascript function from react components

本文关键字：外部 Javascript 函数 调用 组件      更新时间：2023-09-26

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

任何帮助将不胜感激。

in index.html

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

在您的组件中

componentWillMount() {
  window.test();
}

2022 打字稿编辑：

创建一个文件global.d.ts如下所示（文档）：

interface Window {
  test: () => void;
}

✔

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

在索引中.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}`);
}

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

或者您可以切换到基于模块的范式并使用 require/import 来获取模块并使用函数。

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

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

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

<button onClick={this.howItWorks} type="button" className='btn'>How it Works</button>
howItWorks = () => {
  window.HowItWorksVideo();
}

对于打字稿用户，请尝试以下操作：

declare global {
    interface Window {
        externalMethod: (params: any) => void;
    }
}

然后你可以在你的 react 组件中这样调用它

window.externalMethod(params)
相关文章：