Question

从盖茨比（Gatsby）关于盖茨比（Gatsby）的链接组件的官方文档中可以看出，链接组件仅用于内部链接，而对于外部链接，则必须使用标签。

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

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

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

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

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

对于内部链接

<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>

外部链接相对相似

<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组件的任何建议，建议或指导，我们深表感谢。

P.S：我见过Conditionally Use Gatsby Link in React Compoment，但是选择的答案太复杂了，以至于我无法理解，并且我没有足够的观点要评论，无法进一步阐述。

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} />
}`

如何创建Gatsby的Link组件和<a>链接标记的条件渲染？

2 个答案: