反应从 li 内部的锚中删除最后一个 url

Question

我想删除 React 列表中锚标签 (href="( 的最后一个 url。

这是我的代码：

const Link = ({ ...props }) => <TranslationsLink {...props} />;
const Navbar: FC<Props> = () => {
return (
<Nav>
<List>
{list.map((el, i) => {
const lastEl = i === list.length - 1;
return (
<Item key={el.route}>
<Link
lastEl={lastEl}
>
{el.text}
</Link>
</Item>
);
})}
</List>
</Nav>
);
};
const TranslationsLink: FC<ITranslationsLink> = memo(({ ...props }) => {
const { findRouteByName, activeLocale } = useRouter();
const routeMatch = findRouteByName(route, locale || activeLocale);
const url = routeMatch.getUrl(params);
const nextLink = routeMatch.getNextLink(params);
const link = (
<a href={url} {...props}>
{children}
</a>
);
return <Link href={nextLink} as={url} children={link} />;
});

我尝试将 lastEl 传递给链接组件，以便我可以覆盖它的 href：

<Link href={props.lastEl ? '' : nextLink}

问题是，因为相同的链接在其他地方使用，所以我得到了错误的......如何在不为最后一个元素创建另一个链接组件的情况下避免这种情况？

Answer 1

您可以像这样向地图添加条件：

const Navbar: FC<Props> = () => {
return (
<Nav>
<List>
{list.map((el, i) => {
const lastEl = i === list.length - 1;
return lastEl ? null : // just check for the lastEl here
(<Item key={el.route}>
<Link
lastEl={lastEl}
>
{el.text}
</Link>
</Item>
);
})}
</List>
</Nav>
);
};

Answer 2

我找到了答案：

const Navbar: FC<Props> = () => {
return (
<Nav>
<List>
{list.map((el, i) => {
const lastEl = i === list.length - 1;
return
(<Item key={el.route}>
{lastEl ? (
<span>{el.text}</span>
) : (
<Link>
{el.text}
</Link>
)}
</Item>
);
})}
</List>
</Nav>
);
};