Question

我正在寻找制作嵌套三元组的最佳方法。这是代码：

<div style={{overflowY: "auto", overflowX: "hidden", maxHeight: "165px"}}>
    {
        this.props.displayGenericAlerts && this.props.genericAlerts.length > 0 ?
            this.props.genericAlerts.map((alert, index) => <AlertPanel key={index} alert={alert} index={index} />) :
            this.state.alerts.result && this.state.alerts.result.length > 0 ?
                this.state.alerts.result.map((alert, index) => <AlertPanel key={index} alert={alert} index={index} />) :
                !alertResource.isError() && !alertResource.isLoading() && this.state.accountAlert ?
                    alertResource.get("content").map((alert, index) => <AlertPanel key={index} alert={alert.toJS()} index={index} />) :
                    <span>No Alerts Found</span>
    }
</div>

我将不胜感激

Answer 1

选项1（简单）：：您可以将代码移至方法：

getAlerts() {
    if (this.props.displayGenericAlerts && this.props.genericAlerts.length > 0) {
        return this.props.genericAlerts.map((alert, index) => <AlertPanel key={index} alert={alert} index={index} />);
    } else if (this.state.alerts.result && this.state.alerts.result.length > 0) {
        return this.state.alerts.result.map((alert, index) => <AlertPanel key={index} alert={alert} index={index} />);
    } else if (!alertResource.isError() && !alertResource.isLoading() && this.state.accountAlert) {
        return alertResource.get("content").map((alert, index) => <AlertPanel key={index} alert={alert.toJS()} index={index} />);
    } else {
        return <span>No Alerts Found</span>
    }
}

选项2（精美）：：有一个Babel插件（当前在阶段0，请here玩），该插件实现了do-expressions，可以编写一个if/else链作为表达式，因此您可以直接将其与JSX一起使用。 babel-plugin-transform-do-expressions：

<div>
  {do {
    if (cond2) {
      value1;
    } else if (cond2) {
      value2; 
    } else {
      value3;
    }
  }}
</div>

嵌套三元组的最佳替代方法是什么？

1 个答案: