时间戳

首页 > 解决方案 > 在 React Compoment 中有条件地使用 Gatsby Link

reactjs - 在 React Compoment 中有条件地使用 Gatsby Link

问题描述

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

现在，我是 Gatsby，这意味着我是否使用<a>标签或<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>or<a>标记。

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

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

谢谢。

标签： reactjsgatsbyreact-component

解决方案

以这种方式打开 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>);

推荐阅读