JSX 循环与 if else 检查答案

【问题标题】：JSX Loop with if else checkJSX 循环与 if else 检查
【发布时间】：2021-08-02 14:07:10
【问题描述】：

我正在努力解决一个小问题。希望有人可以在这里帮助我。

这是我做的正常循环：

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

【问题讨论】：

你的 else 情况在哪里？
看起来<li> 是一样的？

标签： reactjs loops if-statement filter jsx

【解决方案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>
      );
  });
}

【讨论】：

稍微改一下，但这对我有用！！感谢您的帮助！

【解决方案2】：

首先，如果您只想显示满足您条件的userLinks，您可能需要使用filter 而不是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

【讨论】：