在React Compoment中有条件地使用Gatsby链接 [英] Conditionally Use Gatsby Link in React Compoment

问题描述

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

I have a react component that contains within it a number of sub-components. I want to wrap those sub-components in an anchor tag. Now, sometimes that anchor tag will link to a sub-page, other times it will link to an external page.

现在，我是Gatsby，这意味着我是否使用< a> 标签或< Link> 组件取决于我是否'm链接到内部页面(< Link> )或外部页面(< a> ).详情请参阅此处: https://www.gatsbyjs.org/docs/gatsby-link/

Now, I'm Gatsby and that means whether or not I use an <a> tag or a <Link> component depends on whether or not I'm linking to an internal page (<Link>) or an external page (<a>). See here for more details: https://www.gatsbyjs.org/docs/gatsby-link/

现在，我认为我可以通过检查是否使用了一些定制设计的道具来完成此任务，例如:

Now, I thought that I could accomplish this by checking whether or not I used some custom designed props -- like this:

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> 标记.

The idea is that if I am use the linkTo prop then I'll use an <a> tag. If I use a goTo prop, then I'll use a <Link> component. And if I don't use either -- then I'll just render the rest of the sub-components without either the <Link> or <a> tag.

至少，这就是我希望其工作的方式-但某些工作无法正常进行.

That, at least, is how I would like it to work - but something isn't working properly.

所以，我想知道，有没有一种方法可以根据链接是否是内部链接来有条件地使用< Link> 或< a> 标签还是外部的?如果是这样，有什么想法吗?

So, I am wondering, is there a way to conditionally use the <Link> or <a> tags depending on whether or not the link is internal or external? If so, any ideas how?

谢谢.

推荐答案

打开jsx标签(例如您的案例中的 Link 和 a )并希望在以下位置将其关闭这样就不可能有一个不同的地方.您编写的方式类似于在服务器端使用模板语言在其他标签中呈现内容.

Opening the jsx tag like (Link and a in your case) and hoping to close it at a different place is not possible in this way. The way you have written is similar to may templating language on server side to render things inside other tags.

在您的情况下，您可以使用其他方法.一种方法如下.

In your case you may make use of a different approach. One the approach would be as below.

首先将您的所有子代(例如 SubcompomentOne ， SubcompomentTwo )分配给一个变量.如果您有多个孩子，请使用 React.Fragment .

First assign all your children(like SubcompomentOne, SubcompomentTwo) to a variable. use React.Fragment if you have multiple child.

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

然后，您可以确定要渲染的标签及其内部的子对象，类似于下面的

Then you may determine which tag to render and the children inside them, similar to below

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

这篇关于在React Compoment中有条件地使用Gatsby链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！