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

我有不同类型的动作检查哪个做不同的功能，只是我做了，如果和其他条件检查动作类型，并做了相关的功能，如下面的代码片段如何避免typecript-reactjs中的if语句？

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库（舷窗是安全跨域的iFrame连通的小库）。这在我以前在我的预先

反应应用的iframe

由于通信

来源

2017-01-06 Keshan Nageswaran

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

所以，你可以让你的电话是这样的：

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

警告（由乔·克莱指出）：这个语法，你的对象this的每一个功能调用，因此它可能导致一个“安全违反“，如果this包含你不想”暴露“的功能。

来源

2017-01-06 09:48:06

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

肾上腺素DJ的答案也将工作，如果你的messageEvent串总是匹配对this的方法之一 - 这感觉有点哈克给我，虽然，因为它基本上意味着如果你有一个this.definitelyNotAnEventHandler，你仍然可以通过onMessage来调用它。我更喜欢更明确的方法 - 这只是一个口味的问题，尽管:)

来源

2017-01-06 09:52:08

你的“明确”的方法是正常工作，但没有填补这个“需要”：“我必须再来改变代码再次，我觉得效率低下。“＃ –

@ ADreNaLiNe-DJ：它并没有完全消除改变代码的需要，但它减少了重复。我只是不喜欢用任意字符串索引到'this'，它可能会导致微妙的错误。如果你想要走这条路线，最好是创建一个'this.eventHandlers'对象，而不是'this.eventHandlers [messageEvent.data.action]（messageEvent）'。 –

我同意你的观点，但在提交的代码中没有任何内容暗示除了被调用的回调函数和'onMessage'外，还有其他东西。但关于“安全”的“警告”是相关的。 –

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

回答

相关问题