Question

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

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

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

<a>

这个想法是，如果我使用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>标签？如果是这样，有什么想法吗？

谢谢。

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

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

1 个答案: