Reactjs GatsbyJS:createPage模板中的组件

我在盖茨比使用CreatePagesAPI来创建页面。我得到了所有页面的模板：

const pageTemplate = require.resolve(`./src/templates/page/WpPage.js`)

然而，我并不确定如何在模板文件中使用组件。比如：

import { Herotext } from "./hero/herotext"

const WpPage = ({ data }) => {
  const { wpPage } = data
  return (
    <>
      <Layout>
            <h1><Herotext /></h1>
            <span dangerouslySetInnerHTML={{ __html: wpPage.content }} />
      </Layout>
    </>
  )
}

不确定如何创建我的herotext.js，因此在使用createPage API创建所有页面时将使用它。我尝试过用各种方式改变我的问题，但没有成功

---

当我在herotext.js中执行console.log（data）时，我没有定义。

Gatsby为您提供了大量使用模板系统和上下文API的灵活性。然而，“标准”方法是使用

gatsby node.js

创建动态页面，指向某个模板，向模板发送一些唯一值，并使用它过滤GraphQL查询以获取所需数据。例如，摘自：

在这里，您将遍历一些页面数组（

result.data.allMarkdownRemark.edges.node

），使用

slug

作为路径值创建动态页面，然后，它将

slug

作为唯一值发送到模板（

blog post.js

）

在您的情况下，我建议使用类似

/templates/WpPage.js

（删除

/page

）的文件夹结构，以避免潜在的嵌套问题

您的

WpPage

，应该会收到一些要筛选的唯一值（它似乎是

id

）。这是数据的入口点，您可以从这里将数据发送到任何所需的组件：

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function SomeTemplate({ data }) {
  conosle.log("your data is in", data);

  return (
      <Layout>
            <Herotext heroText={data.wpPage.ACFundersider.heroText} />
      </Layout>
  )
}

export const query = graphql`
  query HeroById($id: String) {
    wpPage(id: { eq: $id }) {
      ACFundersider {
        hero {
          heroText
          heroHeading
        }
      }
      id
    }
  }
`

使用模板作为数据入口点的主要思想。从那里，您可以根据需要分发和构造组件和数据

here was a problem parsing "C:/Users/mig/Desktop/Gatsby/mf20/src/templates/page/hero/herotext.js"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

File: C:/Users/mig/Desktop/Gatsby/mf20/src/templates/page/hero/herotext.js

./src/templates/page/hero/herotext.js
Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\mig\Desktop\Gatsby\mf20\src\templates\page\hero\herotext.js
  5:53  error  Parsing error: Unexpected token

  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,
      },
    })
  })

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function SomeTemplate({ data }) {
  conosle.log("your data is in", data);

  return (
      <Layout>
            <Herotext heroText={data.wpPage.ACFundersider.heroText} />
      </Layout>
  )
}

export const query = graphql`
  query HeroById($id: String) {
    wpPage(id: { eq: $id }) {
      ACFundersider {
        hero {
          heroText
          heroHeading
        }
      }
      id
    }
  }
`

export const Herotext = ({ heroText }) => {
  return <h2>{heroText}</h2>
}