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

Question

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

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

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

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

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

Answer 1

首先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，那就应该通过这些库来管理组件状态。

Answer 2

我记得函数是不能卸载构造函数（constructor）里面的，定义全局函数，看你想怎么做，如果是定义一个在所有页面的方法，那么可以在common文件中建立一个公共方法文件，js或者jsx都可以，将方法写在里面，在使用import引入