Question

为了不重复自我，我想制作一个像这样的组件

import React, { Suspense } from 'react'
// import PropTypes from 'prop-types'
import { graphql, Link } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
// import SEO from "../components/seo"

// import Pager from "../components/pager"

import { lazy } from '@loadable/component'

import loadable from '@loadable/component'

const Pagination = loadable(() => import('../components/page/pagination'))

const Pager = lazy(() => import('../components/pager'))

const Dropdown = lazy(() => import('../components/dropdown/index'))


class PaginationNew extends React.Component {

    render() {
        const data = this.props
        const posts = this.props.data.allCockpitPost.edges
        const { pageContext } = this.props
    // mama, pageContext
        
    return (
        <>
            <div className="paginate-name-div">
                <h1 className="paginate-h1">Semua postingan</h1>
                {typeof window !== 'undefined' && (
                    <Suspense fallback={<div>Loading...</div>}>
                        <Dropdown pageContext={pageContext} />
                    </Suspense>
                )}
            </div>

            <ul className="paginate-ul">
                {posts.map(({ node, }) => {
                    return (
                        <li className="paginate-li" key={node.id}>
                            <Link to={`/${node.title.slug}`} className="paginate-link">
                                <div className="paginate-div1" >
                                    <Img crossOrigin="true" imgStyle={{ objectFit: "unset", }} loading="lazy" fadeIn={false} fluid={node.image.value.childImageSharp.fluid} alt={node.title.value} className="paginate-img" />
                                </div>
                                <div className="paginate-div2">
                                    <h3 dangerouslySetInnerHTML={{ __html: node.title.value }} className="paginate-h3" />
                                    <p className="paginate-written"> Ditulis Oleh {node.content.value.childMarkdownRemark.frontmatter.author} Pada {node.date.value}</p>
                                    <div dangerouslySetInnerHTML={{ __html: node.description.value.childMarkdownRemark.excerpt }} className="paginate-div3">
                                    </div>
                                </div>
                            </Link>
                        </li>
                    )
                })}
            </ul>
            {typeof window !== 'undefined' && (
                <Suspense fallback={<div>Loading...</div>}>
                    <Pager pageContext={pageContext} />
                </Suspense>
            )}   
        </>
    )
}
}

export default PaginationNew

曾经属于此代码的

import React, { Suspense } from 'react'
// import PropTypes from 'prop-types'
import { graphql, Link } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
// import SEO from "../components/seo"

// import Pager from "../components/pager"

import { lazy } from '@loadable/component'

import loadable from '@loadable/component'



// import Dropdown from '../components/dropdown/index'


// const Layout = loadable(() => import('../components/layout'))
const SEO = loadable(() => import('../components/seo'))

const PaginationNew = loadable(() => import('../components/page/pagination'))

const Pager = lazy(() => import('../components/pager'))

const Dropdown = lazy(() => import('../components/dropdown/index'))



export const pageQuery = graphql`
  query($skip: Int!, $limit: Int!) {
    site { 
        siteMetadata {
        title
      } 
    }
    allCockpitPost(filter: {lang: {eq: "id"}, published: {value: {eq: true}}}, sort: {order: DESC, fields: date___value}, limit: $limit, skip: $skip) {
      edges { 
        node {
          id
          title { 
            value
            slug
          }
          image { 
            value {
              childImageSharp {
                fluid(toFormat: WEBP, webpQuality: 80, toFormatBase64: WEBP, quality: 80, pngQuality: 80, jpegQuality: 80, maxWidth: 600) {
              ...GatsbyImageSharpFluid_withWebp_noBase64
                }
              }
            }
          }
          description {  
            value {
              childMarkdownRemark {
                excerpt(pruneLength: 160)
              }
            }
          }
          content { 
              value {
                childMarkdownRemark {
                  frontmatter {
                    author
                  }
                }
              }
            }
            date {
            value(formatString: " DD MMMM, YYYY")
          }
        }
      } 
    }
  }
`;


const PaginateTemplate = ({location, data}) =>{

return (

  <Layout location={location} >
  <SEO title="semua postingan" description="blog oleh pelajar dan untuk orang-orang yang ingin belajar." />
    <PaginationNew data={data}/>
  </Layout>
)}

export default PaginateTemplateimport React, { Suspense } from 'react'
// import PropTypes from 'prop-types'
import { graphql, Link } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
// import SEO from "../components/seo"

// import Pager from "../components/pager"

import { lazy } from '@loadable/component'

import loadable from '@loadable/component'



// import Dropdown from '../components/dropdown/index'


// const Layout = loadable(() => import('../components/layout'))
const SEO = loadable(() => import('../components/seo'))

const PaginationNew = loadable(() => import('../components/page/pagination'))

const Pager = lazy(() => import('../components/pager'))

const Dropdown = lazy(() => import('../components/dropdown/index'))



export const pageQuery = graphql`
  query($skip: Int!, $limit: Int!) {
    site { 
        siteMetadata {
        title
      } 
    }
    allCockpitPost(filter: {lang: {eq: "id"}, published: {value: {eq: true}}}, sort: {order: DESC, fields: date___value}, limit: $limit, skip: $skip) {
      edges { 
        node {
          id
          title { 
            value
            slug
          }
          image { 
            value {
              childImageSharp {
                fluid(toFormat: WEBP, webpQuality: 80, toFormatBase64: WEBP, quality: 80, pngQuality: 80, jpegQuality: 80, maxWidth: 600) {
              ...GatsbyImageSharpFluid_withWebp_noBase64
                }
              }
            }
          }
          description {  
            value {
              childMarkdownRemark {
                excerpt(pruneLength: 160)
              }
            }
          }
          content { 
              value {
                childMarkdownRemark {
                  frontmatter {
                    author
                  }
                }
              }
            }
            date {
            value(formatString: " DD MMMM, YYYY")
          }
        }
      } 
    }
  }
`;


const PaginateTemplate = ({location, data}) =>{

return (

  <Layout location={location} >
  <SEO title="semua postingan" description="blog oleh pelajar dan untuk orang-orang yang ingin belajar." />
    <PaginationNew data={data}/>
  </Layout>
)}

export default PaginateTemplate

我想这样做是因为上面的第二个代码通过更改graphql中的标签过滤器而得到重复，因此有一个类似的代码，具有不同的名称和不同的标签过滤器。

我还在每个标签的gatsby-node.js中都有它。.

kurikulum标签/页面看起来像这样

    const kurikulumPageResults = graphql(`
        {
            kurikulumPageResults: allCockpitMarkdown(filter: {childMarkdownRemark: {frontmatter: {title: {ne: ""}, tags: {eq: "kurikulum"}}}}) {
        edges {
          node {
            childMarkdownRemark {
              frontmatter {
                title
                slug
              }
            }
          }
        }
      }
        }
    `).then(result => {
        if (result.errors) {
            Promise.reject(result.errors);
        }


        paginate({
      createPage, 
      items: result.data.kurikulumPageResults.edges, 
      itemsPerPage: 5, 
      pathPrefix: '/kurikulum', 
      component: path.resolve('./src/templates/kurikulum.jsx'),

  
    })  
    });

Answer 1

我通过进行最少的复制来找到了答案。

组件看起来像这样：

const PaginationNew = ({data}) => {


        const posts = data

然后在分页模板中添加道具

const  PaginateTemplate = ({data }) => {

    const posts = data.allCockpitPost.edges

return (

    <PaginationNew data={posts}/>

在gatsby.js中将graphql数据从父级传递给子级

1 个答案: