如何避免打字稿 reactjs 中的 if 语句

Question

>我有不同类型的操作检查，它们执行不同的功能，只需我做了 if 和 else 条件来检查操作类型并执行相关功能，如下面的代码片段

public onMessage = (messageEvent) => {
    if (messageEvent.data.action === 'subscribeTriggers') {
        this.subscribeTriggers(messageEvent);
    } else if (messageEvent.data.action === 'setGlobalFilters') {
        this.setGlobalFilters(messageEvent);
    } else if (messageEvent.data.action === 'getGlobalFilters') {
        this.receiveGlobalFilters(messageEvent);
    } else if (messageEvent.data.action === 'initFromGlobalFilters') {
        this.initFromGlobalFilters(messageEvent);
    }

有没有更好的解决方案来处理这种情况，因为我将来可能会有更多的操作，我必须一次又一次地更改代码，我觉得这是低效的。

在此onMessage函数之间用作舷窗库的事件侦听器（舷窗是一个用于安全跨域 iFrame 通信的小型库），我曾经在我的 React 应用程序的 iframe 中进行通信。

提前致谢

Answer 1

javascript 中的对象可以看作是一个关联数组，其中键是属性或函数的名称。

因此，您可以像这样拨打电话：

this[messageEvent.data.action](messageEvent);

警告（如Joe Clay所述）：使用此语法，对象的每个函数this都是可调用的，因此如果this包含您不想"公开"的函数，则可能会导致"安全漏洞"。

Answer 2

在以下情况下，switch 语句是你的朋友：

public onMessage = (messageEvent) => {
    switch (messageEvent.data.action) {
        case "subscribeTriggers":
            return this.subscribeTriggers(messageEvent);
        case "setGlobalFilters":
            return this.setGlobalFilters(messageEvent);
        case "getGlobalFilters":
            return this.recieveGlobalFilters(messageEvent);
        case "initFromGlobalFilters":
            return this.initFromGlobalFilters(messageEvent);
    }
}

如果您的messageEvent字符串始终与this上的一种方法匹配，ADreNaLiNe-DJ 的答案也将有效 - 这对我来说感觉有点笨拙，因为这基本上意味着如果您有this.definitelyNotAnEventHandler，您仍然可以通过onMessage调用它。我更喜欢更明确的方法 - 这只是一个品味问题，尽管:)