我正在遵循本教程
https://nickymeuleman.netlify.com/blog/gatsby-pagination#navigate-to-previousnext-page
一切正常,但是我无法在类中添加const。我正在使用VSC对网站进行编码,但似乎并不喜欢它。
这是我要在其中放置const的类。由于我是React的新手,因此在不使用插件的情况下找到解决方案就迷失了自己。
export default class PostList extends React.Component {
render() {
const posts = this.props.data.allMarkdownRemark.edges
return (
<Layout>
<Head title="Posts" />
<div className={layoutStyles.pageHeader}>
<h2>Posts</h2>
<span>Just my ramberlings</span>
</div>
{posts.map(({ node }) => {
const title = node.frontmatter.title || node.fields.slug
return (
<div className={postPageStyles.postItem}>
<div className={postPageStyles.postItemTitle}>
<h2>{title}</h2>
<span>Posted on {node.frontmatter.date}</span>
</div>
<div>
<p>{node.excerpt}</p>
<Link to={`${node.fields.slug}`}>
<span>Continue Reading</span>
<span role="img"> ??</span>
</Link>
</div>
</div>
)
})}
</Layout>
)
}
}
答案 0 :(得分:0)
此功能是否起作用?请注意,您不再访问this.props.data
,而可以直接访问已解构的data
变量。
const PostList = ({data}) => {
const posts = data.allMarkdownRemark.edges
return (
<Layout>
<Head title="Posts" />
<div className={layoutStyles.pageHeader}>
<h2>Posts</h2>
<span>Just my ramberlings</span>
</div>
{posts.map(({ node }) => {
const title = node.frontmatter.title || node.fields.slug
return (
<div className={postPageStyles.postItem} key={node.fields.slug}>
<div className={postPageStyles.postItemTitle}>
<h2>{title}</h2>
<span>Posted on {node.frontmatter.date}</span>
</div>
<div>
<p>{node.excerpt}</p>
<Link to={`${node.fields.slug}`}>
<span>Continue Reading</span>
<span role="img"> ??</span>
</Link>
</div>
</div>
)
})}
</Layout>
)
}
export default PostList
export const query = graphql`{...}`
答案 1 :(得分:0)
您实际上不能在“就这样”的类中使用const
:
class App extends React.Component {
const a = 2 // will throw a syntax error
render(){
return <div>Hello World</div>
}
您可以做的就是不使用const将该变量声明为类字段:
class App extends React.Component {
a = "john";
render(){
//now you can access a via `this`
return <div>{`Hello ${this.a}`}</div>
}
或者如果您不需要它以某种方式“绑定”到您的组件,则可以在类外声明它。
const a = "john"
class App extends React.Component {
render(){
//you can simply access `a`
return <div>{`Hello ${a}`}</div>
}
答案 2 :(得分:0)
我设法解决了这个问题。经过大量的搜索。
const PostList = props => {
const { currentPage, numPages } = props.pageContext
const isFirst = currentPage === 1
const isLast = currentPage === numPages
const prevPage = currentPage - 1 === 1 ? '/' : (currentPage - 1).toString()
const nextPage = (currentPage + 1).toString()
const posts = props.data.allMarkdownRemark.edges
return (
<Layout>
<Head title="Posts" />
<div className={layoutStyles.pageHeader}>
<h2>Posts</h2>
<span>Just my ramberlings</span>
</div>
{posts.map(({ node }) => {
const title = node.frontmatter.title || node.fields.slug
return (
<div className={postPageStyles.postItem}>
<div className={postPageStyles.postItemTitle}>
<h2>{title}</h2>
<span>Posted on {node.frontmatter.data}</span>
</div>
<div>
<p>{node.excerpt}</p>
<Link to={`${node.fields.slug}`}>
<span>Continue Reading</span>
<span role="img"> ??</span>
</Link>
</div>
</div>
)
})}
{!isFirst && (
<Link to={prevPage} rel="prev">
← Previous Page
</Link>
)}
{!isLast && (
<Link to={nextPage} rel="next">
Next Page →
</Link>
)}
{Array.from({ length: numPages }, (_, i) => (
<Link
key={`pagination-number${i + 1}`}
to={`posts/${i === 0 ? '' : i + 1}`}
>
{i + 1}
</Link>
))}
</Layout>
)
}
export default PostList
要使用consts
,我必须进行更改
const PostList = ({ data }) => {
const posts = data.allMarkdownRemark.edges
...
到
const PostList = props => {
const posts = props.data.allMarkdownRemark.edges
然后允许我使用const { currentPage, numPages } = props.pageContext