React JSX 布尔条件导致声纳认知复杂性答案

【问题标题】：React JSX boolean condition causing sonar cognitive complexityReact JSX 布尔条件导致声纳认知复杂性
【发布时间】：2021-07-04 01:33:18
【问题描述】：

由于函数的认知复杂性，我收到了声纳错误。我在大多数 jsx 中使用 react{boolean && 语法，它在 sonarqube 扫描后显示出认知复杂性。有没有其他更好的方法来编写它，以便我可以解决 sonarqube 问题。我的示例语法如下。

{loadStatus === 'success' && (<customtag> Sampletext </customtag>)}  
{loadStatus === 'error' && (<customtag2> Sampletext </customtag2>)}
{loadStatus === 'loading' && (<customtag3> Sampletext </customtag3>)}
{projStatus === 'success' && (<projcustomtag> Sampletext </projcustomtag>)}
{someOtherStatus === 'fetching' && (<somecustomtag> Sampletext </somecustomtag>)}

我在一页中使用上述语法（超过 15 次），这给了我这个问题。每个 AND 操作都被视为 +1 复杂度。有没有办法，我可以修改语法以避免声纳错误。

【问题讨论】：

这是我今天看到的第四或第五个问题，我想知道最近对 sonarqube 的一些更新是否触发了这个？我没有看到任何明显的方法来简化此代码或降低复杂性（老实说，这并不难阅读/推理）。每一行都是不同且独特的行。

标签： reactjs sonarqube

【解决方案1】：

我认为对所有'如果'你需要放入函数更好

但你最常在 jsx 中使用：



{loadStatus === 'success' ?  'this is ok' : null}
{loadStatus === 'error' ?  'you have error' : null}
{loadStatus === 'loading' ?  'loading' : null}

{loadStatus === 'success' ? <div> this is ok </div> : null}

【讨论】：