通过组件动态链接到简单的内部链接

Question

我试图简单地链接到同一页面的不同部分。我可以在不使用<Link>标签的情况下让它工作，而只是使用<a>标签。但是，我正在尝试制作一个动态组件，如果将内部链接传递给组件，则输出<a>，如果没有，则输出<Link>。

我的代码：

export default function App() {
return (
<div>
<LinkedComponent buttonLink="#test" buttonText="Link 1" />
{/* #test works */}
<LinkedComponent buttonLink="/test" buttonText="Link 2" />
{/* /test fails as <link> outputs (with lowercase l) */}
where is link 2?
</div>
);
}
const LinkedComponent = ({ buttonLink, buttonText }) => {
const samePageLink = buttonLink[0] === '#' ? true : false;
const LinkTag = samePageLink ? 'a' : 'Link';
return (
<LinkTag
{...(samePageLink ? { href: buttonLink } : { to: buttonLink })}
className="cls"
>
{buttonText}
</LinkTag>
);
};

演示：https://stackblitz.com/edit/react-9py7xc?file=src%2FApp.js

有谁知道这里出了什么问题？链接 2 也应显示。

我也尝试使用{React.createElement(LinkTag, { className: 'cls' }, buttonText)}，但仍然会出现同样的问题，因为它也错误地输出<link>标签。

请注意，在我的实际真实应用程序上(但由于某种原因不在我提供的演示中)，我可以通过编写不干燥、冗长的代码来解决此问题，如下所示：

return (
<>
{samePageLink ? (
<a href={buttonLink} className="cls">
{buttonText}
</a>
) : (
<Link to={buttonLink} className="cls">
{buttonText}
</Link>
)}
</>
);

但我不想写这样的糟糕代码。有谁知道如何正确解决此问题？

Answer 1

1. Link必须是Route的后代。
2. "a"和"Link"是字符串，但<a>和<Link>是React.ReactElement类型的反应组合。您的解决方案不起作用。

---

如果您需要使用<Link>，这应该有效

function App() {
return (
<BrowserRouter basename={"/"}>
<Routes>
<Route path={"/"} element={<IndexPage />} />
</Routes>
</BrowserRouter>
);
}
const IndexPage = () => {
return <div>
<LinkedComponent buttonLink="#test" buttonText="Link 1" />
{/* #test works */}
<LinkedComponent buttonLink="/test" buttonText="Link 2" samePageLink={true} />
{/* /test fails as <link> outputs (with lowercase l) */}
where is link 2?
</div>
}

const LinkedComponent = ({ buttonLink, buttonText, samePageLink = false }) => {
if (samePageLink) {
return <a href={buttonLink}>{buttonText}</a>
}
return  <Link to={buttonLink}>{buttonText}</Link>
};

您可能不需要使用<Link>

function App() {
return (
<IndexPage />
);
}
const IndexPage = () => {
return <div>
<LinkedComponent buttonLink="#test" buttonText="Link 1" />
{/* #test works */}
<LinkedComponent buttonLink="/test" buttonText="Link 2" samePageLink={true} />
{/* /test fails as <link> outputs (with lowercase l) */}
where is link 2?
</div>
}

const LinkedComponent = ({ buttonLink, buttonText, samePageLink = false }) => {
if (samePageLink) {
return <a href={buttonLink}>{buttonText}</a>
}
return  <a href={buttonLink}>{buttonText}</a>
};

更新

您可以创建类似Link的组件。

const LinkedComponent = ({ buttonLink, buttonText, samePageLink = false }) => {
const A = samePageLink ? Anchor : Link
return  <A to={buttonLink}>{buttonText}</A>
};
const Anchor = ({to, children}) => {
return <a href={to}> {children} </a>
}