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 消失，只有容器在那里。

我想保持标题和按钮形状保持原样，但使其禁用（不可点击）

感谢您的帮助。

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 看起来如何的情况下，您需要稍微调整一下，但您明白了。

否则，您可以使用组件的类名并使用pointer-events: none CSS 规则以及其他样式。

如何在 css 中选择 isDisabled？使用样式化组件

和 styled-components 中的所有道具一样：

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