将上下文从 gatsby-node.js 传递到反应组件（分页/导航链接故障排除）答案

【问题标题】：Passing context from gatsby-node.js into react components (pagination/navigation link troubleshooting)将上下文从 gatsby-node.js 传递到反应组件（分页/导航链接故障排除）
【发布时间】：2020-04-13 11:01:11
【问题描述】：

我目前正在为使用 Gatsby 和 Wordpress 作为 CMS 的客户构建网站。到目前为止一切顺利，但我正在努力创建“上一页”和“下一页”链接，同时完成网站博客的分页。我想我知道我接下来要朝哪个方向前进，但我正在努力通过我的 gatsby-node.js 文件中的上下文传递项目。

gatsby-node.js 的相关部分：


const path = require('path')


module.exports.createPages = async ({ graphql, actions }) => {

  const { createPage } = actions
  const blogPostTemplate = path.resolve('./src/templates/blog-post.js')
  const blogCategoryFilter = path.resolve('./src/templates/blog-filter-category.js')
  const blogArchiveFilter = path.resolve('./src/templates/blog-filter-archive.js')

  const blogList = await graphql(`
query {
  allWordpressPost {
    edges {
      node {
        slug
        date(formatString:"YYYY-MM")
      }
    }
  }
}
`);

  const categories = await graphql(`
query {
  allWordpressCategory {
    edges {
      node {
        slug
      }
    }
  }
}
`);

  const posts = blogList.data.allWordpressPost.edges;

categories.data.allWordpressCategory.edges.forEach((edge) => {
    const slug = edge.node.slug
    const blogPostsCount = posts.length
    const blogPostsPerPaginatedPage = 3
    const paginatedPagesCount = Math.ceil(blogPostsCount / blogPostsPerPaginatedPage)
    for (let i = 0; i <= paginatedPagesCount; i++) {
      createPage({
        component: blogCategoryFilter,
        path: i === 0 ? `/blog/category/${slug}` : `/blog/category/${slug}/${i + 1}`,
        context: {
          slug: slug,
          limit: blogPostsPerPaginatedPage,
          skip: i * blogPostsPerPaginatedPage,
          paginatedPagesCount,
          currentPage: i + 1,
        }
      })
    }
  })

我的模板文件：

import React from 'react'
import { graphql, Link } from 'gatsby'

import Layout from '../components/layout'
import BlogNav from '../components/blognav'

import blogStyles from '../components/modules/blog.module.css'

export const query = graphql`
  query($slug: String!, $limit: Int!, $skip: Int!) {
    allWordpressPost (filter: {categories: {elemMatch: {slug: { eq: $slug }}}} limit: $limit skip: $skip) {
      edges {
        node {
          title
          slug
          content
          date(formatString: "MMMM DD, YYYY")
        }
      }
    }
    allWordpressCategory (filter: {slug: {eq: $slug}}) {
      edges {
        node {
          slug
        }
      }
    }
  }
`


export default ({ data }) => {


  return (
    <Layout>
      <div className={blogStyles.blog_container}>
        <div className={blogStyles.blogContent_container}>
          <ol>
            {data.allWordpressPost.edges.map((edge) => {
              return (
                <div className={blogStyles.blogPost_container}>
                  <li className={blogStyles.blog_list}>
                    <h2><Link to={`/blog/${edge.node.slug}`} className={blogStyles.blog_title} dangerouslySetInnerHTML={{ __html: edge.node.title }}></Link></h2>
                    <p className={blogStyles.blog_date}>{edge.node.date}</p>
                    <p className={blogStyles.blog_content} dangerouslySetInnerHTML={{ __html: edge.node.content }} />
                  </li>

                </div>
              )
            })}
          </ol>
        </div>
        <BlogNav />
      </div>
    </Layout>
  )
}

我想合并一些这样的代码：

class BlogList extends React.component {
  render() {
    const { currentPage, paginatedPagesCount } = this.props.pageContext
    const isFirst = currentPage === 1
    const isLast = currentPage === paginatedPagesCount
    const prevPage = currentPage - 1 === 1 ? "/" : (currentPage - 1).toString()
    const nextPage = (currentPage + 1).toString()

    return (
       // code to display a list of posts 
       {!isFirst && (
        <Link to={prevPage} rel="prev">
          ← Previous Page
        </Link>
      )}
      {!isLast && (
        <Link to={nextPage} rel="next">
          Next Page →
        </Link>
      )}
    )
  }
}

但是，我的组件看起来不同，我不太确定如何提取在此示例中通过上下文传递的信息。这条线特别让我绊倒：

const { currentPage, paginatedPagesCount } = this.props.pageContext

我的错误是它无法读取未定义的道具。看来我不能使用“这个”？我觉得我在这里错过了一些基本的东西。 React 有时让我头晕目眩！

想法？策略？谢谢！请原谅任何草率的代码：我是新手。

【问题讨论】：

您自己的BlogList 组件是什么样的？你熟悉 JavaScript 中this 的概念吗？我建议深入了解 JavaScript 和 React 文档，如果遇到任何问题，请提出更具体的问题。

标签： javascript reactjs wordpress graphql gatsby

【解决方案1】：

假设BlogList 将改为BlogNav（因为您是从模板中调用它）。你可以做的是这样的： - 模板文件

 /** Your Query **/
export default ({ data, pageContext }) => {
 // here `this.props` won't work because this is not a class (unless you transform this to a react component)
 // your body

 <BlogNav {...pageContext} />
}

然后，在您的BlogNav 中，您将能够像现在一样调用属性。

它应该可以工作。

【讨论】：