Reactjs 带if-else检查的JSX循环

我正在努力解决一个小问题。希望有人能帮我

这是我做的正常循环：

      { userLinks.map((item, i) => (
        <li key={i.toString()}>
          <a href={item.url} title={item.label}>
            <span>{item.label}</span>
          </a>
        </li>
      ))}

如果此用户是试用用户，则不显示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>;
      })}

{userLinks.map（（项目，i）=>{
if（userdata.trial&&item.hideTrial！==true）{
返回(


);
}

；
})}

如果条件为

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

{
userLinks.map（（项目，i）=>{
if（userdata.trial&&item.hideTrial）返回null；
其他的
返回(


);
});
}

首先，如果您只想显示符合您条件的

用户链接

，您可能需要使用

过滤器

而不是

映射

第二，如果您想在HTML中使用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>
          )
          ...
      })}

{userLinks.map（（项目，i）=>{
userdata.trial&&item.hideTrial！==true&&(


)
...
})}

参考：

---

您的else案例在哪里？看起来两个

都是一样的？稍微更改一下，但这对我很有用！！谢谢你的帮助！

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