问如何传递道具与tsx和nextjs的反应？
EN

Stack Overflow用户

提问于 2022-06-29 18:35:10

回答 1查看 201关注 0票数 0

因此，代码一直发送给我这2个错误属性‘post’在类型'{}‘上不存在。参数'post‘隐式具有’任意‘类型。

const Home: NextPage = ( { posts } ) => {
  return (
    <div className="container mx-auto px-10 mb-8 bg-gray-300">
      <Head>
        <title>financial blog</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
        <div className="lg:col-span-8 col-span-1:">
        <div className='grid grid-cols-1 lg:grid-cols-12 gap-12'>
          {posts.map((post)=><PostCard post={post.node}  key={post.title} />)} 
          </div>
          <div className="lg:col-span-4 col-span-1">
            <div className="lg:sticky relatve top-8">
              <PostWidget/>
              <Categories/>
            </div>
          </div>
        </div>
        

    </div>
  )
}

export default Home

reactjs

typescript

tsx

回答 1

Stack Overflow用户

发布于 2022-06-29 18:52:46

首先，你需要传球道具，比如：

<Home posts={post} />

其次，您需要在post中声明内容的类型。(因此出现了错误：“Parameter‘post’隐式具有'any‘类型”)。

//...
// this is an example
interface Post {
 title: string;
 content: string;
 author: string;
}

interface HomeProps {
 posts: Post[];
}

const Home: NextPage = ( { posts }: HomeProps ) => {
//...

记住，“post”必须是一个数组(const =.)而不是对象(const post={. })

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72806282

复制

相似问题

问如何传递道具与tsx和nextjs的反应？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何传递道具与tsx和nextjs的反应？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何传递道具与tsx和nextjs的反应？
EN