如何避免 typescript-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 函数之间用作 porthole 库的事件侦听器（Porthole 是一个用于安全跨域 iFrame 通信的小型库。）我曾经在我的 React 应用程序中进行通信iframe

提前致谢

Answer 1

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

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

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

警告（如 Joe Clay 所述）：使用此语法，对象 this 的每个函数都是可调用的，因此如果 this 包含函数，它可能会导致 "security breach"你不想 "expose".

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);
    }
}

ADreNaLiNe-DJ's answer 如果您的 messageEvent 字符串始终与 this 上的其中一种方法相匹配，那么 ADreNaLiNe-DJ 的答案也会起作用 - 虽然这对我来说感觉有点老套，因为它基本上意味着如果您有a this.definitelyNotAnEventHandler，你仍然可以通过 onMessage 调用它。我更喜欢更明确的方法——不过这只是个人喜好问题:)

如何避免 typescript-reactjs 中的 if 语句？

How to avoid if-statements in typescript-reactjs?

javascript

if-statement

porthole.js

typescript

reactjs