在React中有条件地在div周围渲染锚链接

Question

我有一个包裹在锚链接中并具有悬停样式的组件。 如果在数据中存在已循环通过的特定元素的可用URL，则我需要能够有条件地在div上呈现channel.url链接。

我尝试检查channel.url的长度是否大于0，但是我的逻辑不起作用。 最后，应该简单地是，如果循环通过的特定项在其数据对象中没有url，则根本不会对其应用锚链接。

  <ul>
    {items.children.map((channel, i) => (
      (channel, i) =>
            channel.url ? (
              <a href={channel.url} target="_blank">
                <FeaturedApps />
              </a>
            ) : (
              <FeaturedApps />
            )
        )}
    ))}
  </ul>

更新

感谢Ethan，我的逻辑得以解决。 尝试清理思路并将li移至其自己的组件，但在传递icon时出现问题。

零件

const FeaturedApps = ({ iconName, className }) => {
  <li>
    <IconForChannel iconName={channel.icon} className={classes.icon} />
    <span className={classes.channelName}>
      {channel.name}{" "}
      <Icon className={classes.nameIcon} name={channel.nameicon} size={12} />
    </span>
  </li>;
};

有逻辑的环

 <ul>
    {items.children.map((channel, i) => (
      (channel, i) =>
            channel.url ? (
              <a href={channel.url} target="_blank">
                <FeaturedApps />
              </a>
            ) : (
              <FeaturedApps />
            )
        )}
    ))}
  </ul>

Answer 1

您可以将“内部”部分保存到变量中并有条件地进行渲染，即

<ul>
  {items.children.map((channel, i) => {
    let inner = (<span className={classes.channelName}>
      {channel.name}
    </span>);
    return (
      <li key={i}>
        { (channel.url ? (<a href={channel.url} target="_blank">{inner}</a>) : inner) }
      </li>
    </a>
    )};
  )}
</ul>

上面提到过，li应该始终是ul的直系子孙，而我在调整时也已对此进行了调整。 希望这会有所帮助。

Answer 2

这可能起作用：

  <ul>
    {items.children.map((channel, i) => (
      (channel.url) ?
      <a href={channel.url} target="_blank">
        <li key={i}>
          <span className={classes.channelName}>
            {channel.name}
          </span>
        </li>
      </a>
      :
      <li key={i}>
        <span className={classes.channelName}>
          {channel.name}
        </span>
      </li>
    ))}
  </ul>

该三元运算符说：“对于每个通道，如果该通道具有url作为属性，则将包裹在channel.url中的列表项呈现为锚链接，否则，只需呈现该列表项。”

条件？ expr1：expr2