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

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

reactjs

Matt · 技术社区 · 7 年前

我有一个组件,这是包装在一个锚链接和悬停样式。我需要能够有条件地呈现 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 回复 | 直到 7 年前

Ethan Ryan 7 年前

这可能适用于:

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

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

<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的直接孩子,我也调整了这一点。希望这有帮助。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

9 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

9 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

9 月前

Luckkks · 过渡色工作不正常

9 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

9 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

10 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

10 月前

noblerare · Vite错误-未定义导出(SSR)

10 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

10 月前