Question

我有一个React，Redux和Node项目，它有许多内部和外部链接。我想这样做，以便内部链接在同一页面中打开，外部链接在新选项卡中打开。任何帮助或建议表示赞赏，

Answer 1

您可以创建包装器组件，以确定该链接是否为外部链接，并使用适当的道具呈现<a>元素。

以这种方式实施它可以提高可重用性。

为什么可重用性会得到改善？以下是一些例子：

想象一下，在开始时你有20个外部URL，你手动管理他们的道具（没有包装组件）。稍后您决定为每个外部网址添加新的道具，您必须手动将其更改为20个位置。
网址来自API响应，您必须在多个组件中列出它们。如果没有包装器组件 - 您将重复判断URL是否为外部的逻辑。

以下是包装器组件的示例：

// Define the Link wrapper component
class Link extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            target: props.target || this.getTarget(props.href)
        };
    }

    getTarget(url) {
        const siteDomain = 'stackoverflow.com';
        const isExternal = (url.indexOf(siteDomain) === -1);

        if (isExternal) return '_blank';

        return '_self';
    }

    render() {
        const props = Object.assign(this.props, ...this.state);
        return <a {...props}>{this.props.children}</a>
    }
}

// Use the Link wrapper
class Example extends React.Component{
    render() {
        return <Link href="http://google.com/">This is an external link</Link>
    }
}

Answer 2

外部链接应定义为a元素，而不是Link元素，以便您可以使用target="_blank"在新标签中打开链接。

React + React Router，处理要在新选项卡中打开的所有链接

2 个答案: