有条件地在 React 中围绕 div 渲染锚链接答案

【问题标题】：Conditionally render anchor link around div in React有条件地在 React 中围绕 div 渲染锚链接
【发布时间】：2018-09-21 17:20:37
【问题描述】：

我有一个包含在锚链接中并具有悬停样式的组件。我需要能够有条件地呈现 div 上的 channel.url 链接，如果数据中有一个可用的 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>

【问题讨论】：

React 是否应该只将lis 作为ul 的子级。 “允许内容零个或多个
元素，而这些元素通常包含嵌套的

【解决方案1】：

这可能有效：

  <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

【讨论】：

这是一个很好的解决方案并且有效。但是，我试图将li 元素拉入它自己的组件中，但遇到<Icon /> 中的图标未传入的问题。
嗨@Matt，很高兴我能帮助解决这个问题！如果有帮助，请将我的回答标记为正确。谢谢！
会的，伊桑。关于我上面发布的其他问题的任何想法？谢谢！
嗯，不确定图标。您可能想为此提出一个单独的问题！
也许您的 FeaturedApps 组件需要作为道具传递图标？

【解决方案2】：

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

<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 的直接子代，我在它的时候也进行了调整。希望这会有所帮助。

【讨论】：