reactjs - 使用 React 和 TS 将 PageProps 从 Gatsby 和 Parent 传递到功能组件返回未定义

Question

我有以下功能组件。我正在尝试从 Gatsby 的“Pageprops”访问 Prop 以及从我的 parent 那里访问 Prop 。我的“数据”和“错误”正在从父级返回。

返回“数据”和“错误”未定义，但返回正确的“路径”:

import { graphql, PageProps } from 'gatsby'

...
const Events = ({ path }: PageProps, { data, errors }) => {

这会正确返回数据和错误，但我无权访问 Gatsby pageProps:

...
const Events = ({ data, errors }) => {

Answer 1

PageProps 是一种声明式方式，结合使用 Gatsby 和 TypeScript 来访问 props。例如:

import React from "react"
import { PageProps } from "gatsby"

export default function IndexRoute(props: PageProps) {
  return (
    <>
      <h1>Path:</h1>
      <p>{props.path}</p>
    </>
  )
}

就您而言，您正在子元素(data、error 和 path)中解构您的 props 。因此，要访问完整的 pageProps 您只需要:

...
const Events = (props: PageProps) => {
   const { error, data, path } = PageProps
   ... 
}

注意:如果需要，请添加所需的接口(interface)。

这样，您仍然可以解构 props 并继续访问 PageProps。