如何为 Gatsby 的 Link 组件和<a>标签创建条件渲染？</a>

Question

从 Gatsby 的官方文档中关于 Gatsby 的 Link 组件，它指出 Link 组件仅用于内部链接，而对于外部链接，必须使用标签。

我正在构建一个具有内置链接道具的 Button 组件。 问题是现在由于限制，我必须为内部和外部链接创建 2 个单独的 Button 组件。

我的目标是使用一个可用作内部和外部链接的freeLink组件

我尝试为按钮创建一个子组件（ Button ），但我不确定需要条件渲染的父组件（ freeLink ）。 子组件如下：

const Button = props => (
    <button className={props.btnType}>
        <span>{props.text}</span>
    </button>
)

这是我想要实现的视觉逻辑：

1. 对于内部链接

<freeLink intLink="/about" btnType="btn-cta" text="Read about us">
</freeLink>

...which will render...

<Link to="/about">
    <button className="btn-cta">
        <span>Read about us</span>
    </button>
</Link>

2. 外部链接比较类似

<freeLink extLink="https://google.com" btnType="btn-cta" text="Visit Our Partner">
</freeLink>

...which will render...

<a href="https://google.com">
    <button className="btn-cta">
        <span>Visit Our Partner</span>
    </button>
</a>

我对 Javascript、Gatsby 和 React 很陌生，所以我不确定如何根据应用的道具应用条件渲染。

非常感谢任何有关如何编写freeLink组件的建议、建议或指导。

PS：我已经在 React Compoment 中看到有条件地使用 Gatsby Link，但是选择的答案太复杂了，我无法理解，我没有足够的评论点来要求进一步阐述。

Answer 1

你可以尝试这样简单的事情：

const MyLink = (href, text, ...props) => {
  if (href.startsWith("http") { 
    return <a href={href} {...props}>{text}</a>
  } else { 
    return <Link href={href} {...props}>{text}</Link>
  }
}

Answer 2

您的组件可能会根据您传递给它的to或href属性返回不同的东西：

import { Link } from "gatsby"

const freeLink = props => {
  if (props.to) return <Link {...props} />
  return <a {...props} />
}`