大佬教程收集整理的这篇文章主要介绍了带有 if else 检查的 JSX 循环，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我遇到了一个小问题。希望有人能在这里帮助我。
这是我做的正常循环：
{ userlinks.map((item,i) => (
<li key={i.toString()}>
<a href={item.url} title={item.label}>
<span>{item.label}</span>
</a>
</li>
))}
这很好用，我要做的是检查 userlinks > item.hIDeTrial = true
如果当前用户是试用用户：
const userdata = {
userID: 921121,name: 'John',surname: 'Doe',fullname: 'John Doe',gender: 'mr',trial: true,expiredate: '14-07-2021',};
该用户因为是试用用户，所以不要在 item.hIDeTrial === true 的地方显示项目
如果尝试过，但没有成功怎么办：
{ userlinks.map((item,i) => {
if (userdata.trial && item.hIDeTrial !== truE) {
return (
<li key={i.toString()}>
<a href={item.url} title={item.label}>
<span>{item.label}</span>
</a>
</li>
);
}
<li key={i.toString()}>
<a href={item.url} title={item.label}>
<span>{item.label}</span>
</a>
</li>;
})}
如果条件为 null 则返回 true 以不渲染任何内容。
这应该有效。
{
userLinks.map((item,i) => {
if (userdata.trial && item.hideTrial) return null;
else
return (
<li key={i.toString()}>
<a href={item.url} title={item.label}>
<span>{item.label}</span>
</a>
</li>
);
});
}
首先，如果您只想显示符合条件的 userLinks，您可能需要使用 filter 而不是 @H_613_7@map。
其次，如果你想在html里面使用if，请考虑使用inline if，比如：
{ userLinks.map((item,i) => {
userdata.trial && item.hideTrial !== true && (
<li key={i.toString()}>
<a href={item.url} title={item.label}>
<span>{item.label}</span>
</a>
</li>
)
...
})}
参考： https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
以上是大佬教程为你收集整理的带有 if else 检查的 JSX 循环全部内容，希望文章能够帮你解决带有 if else 检查的 JSX 循环所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。