条件渲染导航答案

【问题标题】：Conditional render Navigation条件渲染导航
【发布时间】：2021-09-22 22:42:11
【问题描述】：

您好，我需要有条件地渲染我的导航。我使用 Gatsby 和 GraphQl。我有导航组件，并且取决于我需要渲染不同导航的路线。问题是我无法制作有条件的 useStateStatic 钩子。我在源代码中创建了两个不同的导航，它是 DatoCMS，但我无法查询它。

const Navigation = () => {
  const pathName = window.location.pathname;
  const data = useStaticQuery(
    graphql`
      {
        datoCmsNavigation(sectionId: { eq: "navigation" }) {
          sectionId
          logo {
            url
            alt
          }
          menuItem {
            id
            name
            href
          }
        }
      }
    `
  );

  const {
    datoCmsNavigation: { sectionId, logo, menuItem },
  } = data;

  return (
    <NavBar id={sectionId}>
      <NavBarLogoWrapper>
        <a href="/">
          <img src={logo.url} alt={logo.test} />
        </a>
      </NavBarLogoWrapper>

      <NavBarList>
        {menuItem.map((item, index) => (
          <NavBarItem key={index}>
            <a href={item.href}> {item.name.toLowerCase()}</a>
          </NavBarItem>
        ))}
      </NavBarList>
    </NavBar>
  );
};

这是我的导航组件。有没有人有想法我该如何处理？

【问题讨论】：

标签： reactjs graphql gatsby datocms

【解决方案1】：

自window (and other global objects) are not available during the SSR 以来，您的方法将在 gatsby 构建中失败。您不需要在您的场景中使用 useState 挂钩，您只需要知道用户实际看到的是哪个页面。

Gatsby 中的顶级组件（页面）拥有location property，它可以让你知道一堆数据，包括当前页面。您可以将该数据传递给您的Navigation 组件，以便进行比较。例如：

const Blog = ({location, someOtherDestructuredProps}) => {

   return <section>
     <Navigation currentPage={location.pathname}/>
     <OtherComponent />
   </section>
}

然后，在您的导航组件中：

const Navigation = ({currentPage ="/"}) => {
  const pathName = window.location.pathname;
  const data = useStaticQuery(
    graphql`
      {
        datoCmsNavigation(sectionId: { eq: "navigation" }) {
          sectionId
          logo {
            url
            alt
          }
          menuItem {
            id
            name
            href
          }
        }
      }
    `
  );

  const {
    datoCmsNavigation: { sectionId, logo, menuItem },
  } = data;

  return (
    <NavBar id={sectionId}>
      <NavBarLogoWrapper>
        <a href="/">
          <img src={logo.url} alt={logo.test} />
        </a>
      </NavBarLogoWrapper>

      <NavBarList>
        {menuItem.map((item, index) => {
         
         if(currentPage == '/blog') return <DifferentNavBar />
         return <NavBarItem key={index}>
            <a href={item.href}> {item.name.toLowerCase()}</a>
          </NavBarItem>
        })}
      </NavBarList>
    </NavBar>
  );
};

在较小的更改中，重要的部分是为currentPage 设置默认值（以防它丢失）和map 循环的更改以返回不同的导航栏。当然，调整它以使其适应您的需要和要求。

【讨论】：