Что такое переменная children в Gatsby? Как я могу назначить это другому компоненту? - PullRequest
Новая
       0

Что такое переменная children в Gatsby? Как я могу назначить это другому компоненту?

1 голос
/ 14 марта 2020

Я пытаюсь создать небольшой блог с Гэтсби, но в моем index.jsx есть что-то, чего я не могу понять.

Существует переменная, которая определяется следующим образом:

const { children } = this.props;

При рендеринге это самый последний пост. Но я не могу понять, где я назначу эту опору. Например, когда я рендерим компонент заголовка, я передаю реквизит следующим образом:

<Header myProps="someValue" />

Но как я могу это сделать с индексом? Разве нет в индексе, где вы вызываете все свои компоненты с их реквизитом?

Это мой файл index.jsx: 

import React from "react";
import Helmet from "react-helmet";
import Navigation from "../components/Navigation";
import config from "../../data/SiteConfig";
import "../styles/main.scss";

export default class MainLayout extends React.Component {
  render() {
    const { children } = this.props;
    return (
      <>
        <Helmet>
          <meta name="description" content={config.siteDescription} />
          <html lang="en" />
        </Helmet>
        <Navigation menuLinks={config.menuLinks} />
        <main>{children}</main>
      </>
    );
  }
}

Видите? Я использую { children } в индексе, но как Гэтсби узнает, что это за переменная, если я никогда не передам проп?

1 Ответ

0 голосов
/ 15 марта 2020

Gatsby позволяет запрашивать контент, т.е. дочерние компоненты, различными способами. Вы не указали, какой стартер или тему вы используете, что может быть важно для вашего вопроса.

Видите? Я использую {children} в индексе, но как Гэтсби узнает, что это за переменная, если я никогда не передам проп? составная часть. Go через ваши gatsby-config.js и gatsby-node.js и найдите компоненты, которые вводят данные.

В этом руководстве объясняется, как предоставлять данные компонентам. Например, один из способов передачи данных в качестве реквизита в компонент шаблона - это использование API узла : 

// gatsby-node.js

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/templates/blog-post.js`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.fields.slug,
      },
    })
  })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...