javascript - react内如何定义全局函数？

问题描述

问 题

小弟以前是专注写页面的前端，近期老大给了一个react的项目比较难懂，希望圈内大牛可以助我解惑！
问题如下：我现在的页面内嵌了一个iframe(公用登录框)，iframe内会返回是否登录成功，若成功则在最外层页面返回一个值给callback函数如下：

那么这个callback函数就要在最外层页面的window下定义（是这样没错吧？），目的是判断是否有返回约定的值

若有则关闭iframe(将iframe的state改为隐藏)

可是我不知道应该如何在react中定义全局函数，项目中的app.jsx中的方法都被包裹在

这个类中，可以在这个类中定义吗？初学react与es6，很多不明白的地方，如果有没讲清楚的地方望提醒谢谢!

解决方案

首先App这个class（app.jsx里的class）是在最外层window 下定义的对吧？所以在登录iframe 内调用window.top.callback()实际上是调用最外层window 的全局方法window.callback()，是吧。

问题就变成了如何通过调用window.callback()，触发调用App组件实例的方法callback()。

你当然可以直接在constructor 里写：

window.callback = () => _this.callback()

也可以通过自定义事件机制，在window.callback()里trigger 一个事件：

window.callback = () => eventBus.trigger('callback')

在App的constructor里监听这个事件：

constructor(props, _this) {
    super(props);
    eventBus.on('callback', () => _this.callback())
}

另外如果你们项目中有Flux 或者Redux，那就应该通过这些库来管理组件状态。

这篇关于javascript - react内如何定义全局函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！