带有if-else检查的JSX循环

Question

我正在处理一个小问题。希望有人能帮我。

这是我做的正常循环：

{ 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>;
})}

Answer 1

如果条件为true，则返回null以不渲染任何内容。这应该行得通。

{
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>
);
});
}

Answer 2

首先，如果只想显示满足条件的userLinks，则可能需要使用filter而不是map。

第二，如果你想在html中使用if，请考虑使用内联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-如果使用逻辑运算符