最后一页上的 Gatsby 博客分页禁用按钮

Question

我在 Gatsby 中设置博客分页是这样的：

gatsby-node.js 文件：

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
    query {
      allContentfulPost(sort: { order: ASC, fields: [createdAt] }) {
        edges {
          node {
            postTitle
            slug
          }
        }
      }
    }
  `)

const postsPerPage = 2
  const numPages = Math.ceil(posts.length / postsPerPage)
  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/blog` : `/blog/${i + 1}`,
      component: path.resolve("./src/templates/blog.js"),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
}

然后在 blog.js 文件中添加按钮和页码，如下所示：

function Blog({ pageContext, data }) {
  const { currentPage, numPages } = pageContext
  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage = currentPage - 1 === 1 ? "" : (currentPage - 1).toString()
  const nextPage = (currentPage + 1).toString()
  return ( 

    <PaginationContainer>
              <FlatButton
                item={
                  !isFirst && {
                    title: "Previous Page",
                    icon: "/images/icons/left-arrow.svg",
                    link: `/blog/${prevPage}`,
                  }
                }
              />
    
              <PageNumbersContainer>
                {Array.from({ length: numPages }, (_, i) => (
                  <PageNumber
                    item={{
                      title: `${i + 1}`,
                      icon: "",
                      link: `/blog/${i === 0 ? "" : i + 1}`,
                      key: `pagination-number${i + 1}`,
                    }}
                  />
                ))}
              </PageNumbersContainer>
    
              <FlatButton
                item={
                  !isLast && {
                    title: "Next Page",
                    icon: "/images/icons/right-arrow.svg",
                    link: `/blog/${nextPage}`,
                  }
                }
              />
            </PaginationContainer>

)}

现在，当没有上一页或下一页时，按钮中的 title 消失，只有容器在那里。

我想保持标题和按钮形状不变，但要将其禁用 (un-cklickable)

非常感谢你的帮助。

Answer 1

如果你想保留 title 你只需要删除条件并保留组件，如：

          <FlatButton
            item={
              {
                title: "Next Page",
                icon: "/images/icons/right-arrow.svg",
                link: `/blog/${nextPage}`,
              }
            }
          />

要禁用该按钮，您有多种解决方法。最简单和原生的是，如果你的 FlatButton 组件从任何 button 标签扩展，你可以传递一个 isDisabled prop 像：

          <FlatButton
            item={
              {
                isDisabled: isLast
                title: "Next Page",
                icon: "/images/icons/right-arrow.svg",
                link: `/blog/${nextPage}`,
              }
            }
          />

然后，在你的组件中：

const FlatButton = ({ item })=>{

  return <button disabled={item.isDisabled}>{item.title}</button>
}

当然，在不知道您的 FlatButton 看起来如何的情况下，您需要稍微调整一下，但您明白了。

否则，您可以使用组件的 class 名称并使用 pointer-events: none CSS 规则等样式。

how do i select isDisabled in css? using styled components

喜欢 styled-components 中的所有道具：

  color: ${props => props.isDisabled? "white" : "red"};

最后一页上的 Gatsby 博客分页禁用按钮

Gatsby blog pagination disable button on the last page

navigation

reactjs

contentful

gatsby