在 React 组件中有条件地使用 Gatsby Link

Question

我有一个反应组件，其中包含许多子组件。我想将这些子组件包装在锚标记中。现在，有时锚标记会 link 到子页面，其他时候它会 link 到外部页面。

现在，我是 Gatsby，这意味着我是否使用 <a> 标签或 <Link> 组件取决于我是否 link内部页面 (<Link>) 或外部页面 (<a>)。有关更多详细信息，请参见此处：https://www.gatsbyjs.org/docs/gatsby-link/

现在，我认为我可以通过检查我是否使用了一些定制设计的道具来实现这一点——像这样：

export const ListItem = props => (
  <div>
    {props.goTo && <Link to={props.goTo}>}
    {props.linkTo && <a href={props.linkTo}>}

        <SubcompomentOne>...</SubcompomentOne>
        <SubcompomentTwo>...</SubcompomentTwo>

    {props.linkTo && </a> }
    {prpos.goTo && </Link> }
  </div>
)

我的想法是，如果我使用 linkTo 道具，那么我将使用 <a> 标签。如果我使用 goTo 道具，那么我将使用 <Link> 组件。如果我不使用任何一个 - 那么我将只渲染其余的子组件，而不使用 <Link> 或 <a> 标记。

这至少是我希望它的工作方式 - 但有些地方无法正常工作。

所以，我想知道，有没有办法根据 link 是内部还是外部有条件地使用 <Link> 或 <a> 标签？如果是这样，有什么想法吗？

谢谢。

Answer 1

打开 jsx 标签（在您的情况下为 Link 和 a）并希望以这种方式在不同的地方关闭它是不可能的。您编写的方式类似于服务器端的模板语言以在其他标签内呈现内容。

在您的情况下，您可以使用不同的方法。一种方法如下。

首先将你所有的children（如SubcompomentOne、SubcompomentTwo）分配给一个变量。如果您有多个 child.

，请使用 React.Fragment

const children = (<React.Fragment>
    <SubcompomentOne>...</SubcompomentOne>
    <SubcompomentTwo>...</SubcompomentTwo>
  </React.Fragment>
);

然后你可以确定渲染哪个标签以及里面的children，类似下面

return (<div>
 {
  props.goTo ?
   (<Link to={props.goTo}>{children}</Link>) : 
   (<a href={props.linkTo}>{children}</a>)
 }
 </div>);

在 React 组件中有条件地使用 Gatsby Link

Conditionally Use Gatsby Link in React Compoment

reactjs

gatsby

react-component