将上下文从 gatsby-node.js 传递到 react 组件(分页/导航链接故障排除)

Question

我目前正在为一个客户建立一个网站，将Gatsby和Wordpress作为CMS。到目前为止，一切都很顺利，但我正在努力创建"上一页"和"下一页"链接，同时完成网站博客的分页。我想我知道我下一步要去的方向，但我正在努力通过我的 gatsby-node.js 文件中的上下文传递项目。

盖茨比节点的相关部分.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

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

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

Answer 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您将能够像现在一样调用属性。

它应该有效。