基于Gatsby实现：当Boolean为True时显示Contentful横幅

你的代码里有两个关键错误导致逻辑不生效：

1. 变量赋值错误 #

你把announcementBanner赋值成了data.contentfulAnnouncementBanner.bannerMessage（这是一个字符串），所以后续访问announcementBanner.display会得到undefined，自然无法触发显示逻辑。应该直接把整个横幅对象赋值给变量：

const announcementBanner = data.contentfulAnnouncementBanner

2. JSX结构不完整 #

代码里的片段语法<>没有闭合，且return语句的结构不完整，需要补全闭合标签。

另外，为了避免announcementBanner为null时出现报错，建议使用可选链操作符?.做安全访问。

修正后的完整代码： #

const Header = () => {
  const data = useStaticQuery(graphql`
    query {
      contentfulCarousel(title: { eq: "homepage" }) {
        Images {
          id
          gatsbyImageData
          description
        }
      }
      contentfulAnnouncementBanner {
        bannerMessage
        display
      }
    }
  `)
  const announcementBanner = data.contentfulAnnouncementBanner
  return (
    <>
      {announcementBanner?.display && (
        <div className="announcementBanner">
          <h2>{announcementBanner.bannerMessage}</h2>
        </div>
      )}
      {/* 这里可以放Header的其他内容 */}
    </>
  )
}

额外优化建议 #

如果你的Contentful里可能存在多个Announcement Banner条目，建议在GraphQL查询里加上过滤条件，只获取display: true的条目，减少前端判断逻辑：

query {
  contentfulCarousel(title: { eq: "homepage" }) {
    Images {
      id
      gatsbyImageData
      description
    }
  }
  contentfulAnnouncementBanner(display: { eq: true }) {
    bannerMessage
    display
  }
}

这样前端只需判断announcementBanner是否存在即可显示横幅。

内容的提问来源于stack exchange，提问作者Kelsey