时间戳

首页 > 解决方案 > 有条件地在 React 中围绕 div 渲染锚链接

reactjs - 有条件地在 React 中围绕 div 渲染锚链接

问题描述

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

我尝试检查 的长度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>

标签： reactjs

解决方案

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

<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 的直系子代，我在此过程中也进行了调整。希望这会有所帮助。

推荐阅读