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

时间:2018-11-18 23:28:49

标签: javascript reactjs react-router

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

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

0 个答案:

没有答案