我有一个React组件,它显示带有三个链接的产品。我的产品链接重定向到react-router下的内部链接,但是对于一种产品,我想重定向到外部链接。如何正确管理外部链接?
目前,我有两种解决方案,不知道哪一种是更好的解决方案?
这是我的反应组件Product
呈现的内容:
<article>
<header>
<Link className={s.link} to={link}>
{cardImage}
</Link>
</header>
<div>
<h2>
<Link to={link}>
{title}
</Link>
</h2>
<div>
<Link to={link}>
Shop Now
</Link>
</div>
</div>
</article>
这是我的两个解决方案:
解决方案1:
创建LinkDuo组件
const propTypes = {
to: PropTypes.string.isRequired,
};
/**
* Link that also works for external URL's
*/
export const LinkDuo = (props) => {
return isExternal(props.to) ?
<a href={props.to} {...props}/> // eslint-disable-line jsx-a11y/anchor-has-content
:
<Link {...props} />;
};
LinkDuo.propTypes = propTypes;
并用LinkDuo替换Link
<article>
<header>
<LinkDuo className={s.link} to={link}>
{cardImage}
</LinkDuo>
</header>
<div>
<h2>
<LinkDuo to={link}>
{title}
</LinkDuo>
</h2>
<div>
<LinkDuo to={link}>
Shop Now
</LinkDuo>
</div>
</div>
</article>
解决方案2:
const isExternal = !!link.match(/^http/);
<article>
<header>
{isExternal ?
<a href={link} className={s.link}>{cardImage}</a>
:
<Link className={s.link} to={link}>
{cardImage}
</Link>
}
</header>
<div>
<h2>
{isExternal ?
<a href={link} className={s.link}>{cardImage}</a>
:
<Link to={link}>
{title}
</Link>
}
</h2>
<div>
{isExternal ?
<a href={link} className={s.link}>{cardImage}</a>
:
<Link to={link}>
Shop Now
</Link>
}
</div>
</div>
</article>
就可重用性,可维护性,可测试性而言,哪个是更好的解决方案?