时间戳

首页 > 解决方案 > 如何在 Gatsby 的模板组件中访问上下文变量？

reactjs - 如何在 Gatsby 的模板组件中访问上下文变量？

问题描述

在 Gatsby 应用程序的反应组件中，我了解如何在 graphql 查询中使用上下文变量，例如：

export const tagPageQuery = graphql`
  query TagPage($tag: String) {
    site {
      siteMetadata {
        title
      }
    }
    allItem(filter: { tags: { in: [$tag] } }) {
      totalCount
      edges {
        node {

          id
          move
          videoUrl

$tag是一个允许我过滤的字符串。我明白了。但是有没有办法在组件本身中访问这个值？我可以访问 graphql 查询获取的数据，但无法获取 Graphql 之外的变量。我很想拥有它{context.tag}或类似的东西，以便能够在我的h1. 我已经阅读了Gatsby GraphQL 参考资料，但没有任何问题。感觉获得这个值应该很容易，但我想知道是否需要使用getContext钩子之类的东西？

标签： reactjsgraphqlgatsby

解决方案

10 分钟的小睡可以做的事情真是太神奇了！实际上，您可以使用此处详述的 pageContext 属性访问上下文变量：https ://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs

const TagPage = ({ data, classes , pageContext}) => {

将 pageContext 添加到我的道具允许我访问$tag.

推荐阅读