react classname 3条件渲染隐藏显示无

Question

如果在这三个变量之间满足条件，我必须对三个变量求值以隐藏div，如下所示:

appState.fullResults
appState.someResults
appState.otherResults

所以，当appState.fullResults和appState.someResults是空的，但appState.otherResults有东西，我需要隐藏一个div，这个代码片段是一个例子:

<div classname='container'>
<div classname='full-some'>
boxes
</div>
<divclassname='others'>
boxes
</div>
</div>

我试过这样做，但不工作

className={`${
(!appState.someResults?.length > 0 && otherResults?.length > 0)
? 'container-boxcard'
: 'd-none'
}`}

我总是得到同样的结果:如果其他人的结果有结果，而其他人的结果没有结果，那么"没有"。不是用来隐藏它的

https://i.stack.imgur.com/Wco8p.jpg仍然求值为false并应用d-none类

希望我解释得很清楚，谢谢你的帮助。

Answer 1

试试这个:

const { fullResults, someResults, otherResults } = appState;
const className = !fullResults?.length && !someResults?.length
&& otherResults?.length ? 'd-none' : 'container-boxcard';
<YourComponent className={className} {...props} />

Answer 2

!appState.someResults?.length > 0很难理解，我建议您应该将其更改为!appState.someResults?.length或appState.someResults?.length === 0(您可以选择其中之一)。

我没有看到你在其他任何地方声明otherResults，所以我认为otherResults?.length > 0应该是appState.otherResults?.length(或appState.otherResults?.length > 0)。

className={`${(!appState.someResults?.length && appState.otherResults?.length)
? 'd-none'
: 'container-boxcard'
}`}

当appState

。fullResults和appState。有些结果是空的，但是appState。otherResults有一些

根据你的演示，你可以用3个条件来遵循

className={`${(!appState.someResults?.length && !appState.fullResults?.length && appState.otherResults?.length)
? 'd-none'
: 'container-boxcard'
}`}

Answer 3

最后是创建对象fullResults, somerresults &otherResults，它将所有答案传递给对象，并在其中创建另一个对象，这就是为什么即使对象内部没有数据，其求值长度也总是大于0因为它内部有内容

setAppQuotationState({
loading: false,
fullResults: fullResults?.length > 0 ? [fullResults] : [],
someResults: someResults?.length > 0 ? [someResults] : [],
otherResults: otherResults?.length > 0 ? [otherResults] : [],
})
} 

纠正这个错误，我指出的解决方案，运行良好。