Question

我有一个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>

就可重用性，可维护性，可测试性而言，哪个是更好的解决方案？

React-如何管理外部链接-哪种解决方案更好

0 个答案: