将 Gatsby Link 与 TypeScript 结合使用

Question

我正在将 Gatsby Link 与 TypeScript 一起使用，我想将参数从源组件传递给链接组件。

盖茨比的参考资料如下。

Sometimes you’ll want to pass data from the source page to the linked page. You can do this by passing a state prop to the Link component or on a call to the navigate function. The linked page will have a location prop containing a nested state object structure containing the passed data.

下面是带有 JavaScript 的示例代码。

const PhotoFeedItem = ({ id }) => (
  <div>
    {/* (skip the feed item markup for brevity) */}
    <Link
      to={`/photos/${id}`}
      state={{ fromFeed: true }}
    >
      View Photo
    </Link>
  </div>
)

const Photo = ({ location, photoId }) => {
  if (location.state.fromFeed) {
    return <FromFeedPhoto id={photoId} />
  } else {
    return <Photo id={photoId} />
  }
}

但是对于 TypeScript，我不知道应该为 props 使用哪种类型来获取 location 属性。我尝试将 GatsbyLinkProps 作为链接组件的 props 类型，但它不包含 location prop 并且它的 state prop 是 undefined 即使我已经通过了 state prop来自源组件。

有什么想法吗？

Answer 1

location 是 PageProps 的对象类型，需要从页面组件传递到 Photo 组件（假设 Photo 不是页面在编码示例中）。

import type { PageProps } from 'gatsby';

interface PhotoProps {
  location: PageProps['location'];
  photoId: string;
}

const Photo = ({ location, photoId }: PhotoProps) ...

将 Gatsby Link 与 TypeScript 结合使用

Using Gatsby Link with TypeScript

typescript

reactjs

gatsby