嵌套燕鸥的最佳选择是什么

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阶段，在这里使用它(实现了do-expressions，它可以将if/else链作为表达式编写，因此您可以直接将其与JSX一起使用。babel-plugin转换do表达式：

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