我不确定之前是否有人问过这个问题，或者有人在 reactjs 上遇到过同样的问题。所以场景是这样的，我有一个包含一些 javascript的index.html文件。现在在我的 react 组件上，我有一个条件，只有在条件为真时才会呈现。这意味着最初当我的页面加载时，组件尚未呈现。当我切换按钮时，这是该组件被渲染的地方。该子组件需要调用包含在我的 index.html 中的 javascript 方法。我该怎么做？
任何帮助是极大的赞赏。
从react组件调用外部 Javascript 函数
IT技术
javascript
reactjs
2021-03-31 18:22:05
4个回答
在 index.html
<script type="text/javascript">
function test(){
alert('Function from index.html');
}
</script>
在您的组件中
componentWillMount() {
window.test();
}
试试这个解决方案，在启用 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}`);
}
因此，要么您在全局范围（又名窗口）上定义该方法。然后你可以从任何方法中使用它，无论是否是 React。
或者您可以切换到基于module的范例并使用 require/import 来获取module并使用该功能。
对于更大的项目，后者更好，因为它的规模更大，而如果您需要演示或 POC，您当然可以将所有内容挂钩到全局范围，它会起作用。
有关module的更多信息，请访问：http : //exploringjs.com/es6/ch_modules.html
您可以将您的方法附加到全局窗口对象，而不是像在您的组件中那样使用它：
<button onClick={this.howItWorks} type="button" className='btn'>How it Works</button>
howItWorks = () => {
window.HowItWorksVideo();
}