Блог

Главная - Вопросы по программированию - Ошибка Гэтсби: в типе «{} «отсутствуют следующие свойства типа» Страницы»

Ошибка Гэтсби: в типе «{} «отсутствуют следующие свойства типа» Страницы»

#javascript #typescript #gatsby

Вопрос:

Я недавно обновил Gatsby с версии 2.X до 3.X и столкнулся с довольно большим количеством ошибок. Я использую машинописный текст, но это мое первое использование PageProps . Тем не менее, я получаю ошибку, и я предполагаю, что она PageProps не передается Home в index.tsx компоненте. Может ли кто-нибудь прояснить это для меня?

Ошибка:

 Type '{}' is missing the following properties from type 'PageProps<object, object, unknown>': path, uri, location, navigate, and 5 more.ts(2740)

индекс.tsx

 // Imports: Dependencies
import React from 'react';
import { PageProps } from 'gatsby';

// Imports: Pages
import Home from './Home';

// Imports: Components
import Layout from '../layouts/Layout';

// Index
const index: React.FC<PageProps> = (): JSX.Element => {
  return (
    // <Layout>
      <Home /> // ERROR IS HERE
    // </Layout>
  );
};

// Exports
export default index;

Главная страница.tsx:

 // Imports: Dependencies
import React from 'react';
import { Container } from 'react-bootstrap';
import { PageProps } from 'gatsby';

// Imports: Components
import NavBar from '../components/NavBar';
import Hero from '../components/Hero';
import Footer from '../components/Footer';

// Page: Home
const Home: React.FC<PageProps> = (): JSX.Element => {
  return (
    <Container id="home-container">
      <NavBar />

      <Hero />

      <Footer />
    </Container>
  );
};

// Exports
export default Home;

Комментарии:

1. У меня нет опыта работы с Гэтсби, но в reactjs с машинописным текстом вам не нужно делать эту реакцию. FC<PageProps>, это следует использовать всякий раз, когда вы хотите выполнить детализацию/передать реквизиты компоненту.

Ответ №1:

Используйте его, как:

 // Imports: Dependencies
import React from 'react';
import { Container } from 'react-bootstrap';
import { PageProps } from 'gatsby';
// Imports: Components
import NavBar from '../components/NavBar';
import Hero from '../components/Hero';
import Footer from '../components/Footer';

// Page: Home
const Home= (props: PageProps) => {
  return (
    <Container id="home-container">
      <NavBar />

      <Hero />

      <Footer />
    </Container>
  );
};

// Exports
export default Home;

В этом случае вам не нужно передавать реквизиты компоненту, чтобы избежать оскорбительной строки:

 const Home: React.FC<PageProps> = (): JSX.Element => {

Более подробная информация по адресу: https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/

Метки: