Question

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

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

channel.url

更新

感谢Ethan，我的逻辑得以解决。试图清理思路，然后将li移至其自己的组件，但在传递<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>;
};

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

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

2 个答案: