在 React 组件中有条件地使用 Gatsby 链接

IT技术 reactjs gatsby react-component
2021-05-06 17:21:26

我有一个react组件，其中包含许多子组件。我想将这些子组件包装在一个锚标记中。现在，有时该锚标记会链接到子页面，有时它会链接到外部页面。

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

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

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

这个想法是，如果我使用linkToprops，那么我将使用<a>标签。如果我使用goToprops，那么我将使用<Link>组件。如果我不使用任何一个——那么我将只渲染其余的子组件，而不使用<Link>or<a>标签。

这至少是我希望它工作的方式 - 但有些东西不能正常工作。

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

谢谢。

1个回答

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

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

首先将您所有的孩子（如SubcompomentOne, SubcompomentTwo）分配给一个变量。使用React.Fragment如果您有多个孩子。

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

然后你可以确定要渲染哪个标签以及其中的孩子，类似于下面

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

其它你可能感兴趣的问题
上一篇带有 ReactJS 的 Google+ 登录按钮 下一篇使用 useState 钩子了解 reactjs 中奇怪的 setState 行为