代码之家 › 专栏 › 技术社区 › Matt

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

reactjs

Matt · 技术社区 · 6 年前

我有一个组件,这是包装在一个锚链接和悬停样式。我需要能够有条件地呈现 channel.url

我试着检查 频道.url

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

更新

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>

2 回复 | 直到 6 年前

Ethan Ryan 6 年前

这可能适用于:

  <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中的列表项呈现为锚定链接,否则,只需呈现列表项。”

Sebastian Rothbucher 6 年前

您可以将“内部”部分保存到一个变量并有条件地呈现,即。

<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>

上面提到,李应该永远是ul的直接孩子,我也调整了这一点。希望这有帮助。

推荐文章