时间戳

首页 > 解决方案 > Gatsby + Markdown：GraphQL 查询呈现为组件，但在导入页面时不呈现

javascript - Gatsby + Markdown：GraphQL 查询呈现为组件，但在导入页面时不呈现

问题描述

我有一个读取 md 文件并呈现 HTML 的简单组件：

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

const IndexPage = ({ data }) => {
  console.log(data)
  const createMarkup = { __html: data.allMarkdownRemark.edges[0].node.html }
  return (
    <>
      <h1>test start</h1>
      <p>
        <div dangerouslySetInnerHTML={createMarkup} />
      </p>
      <h1>test end</h1>
    </>
  )
}

export default IndexPage

export const pageQuery = graphql`
  query MyQuery {
    allMarkdownRemark {
      edges {
        node {
          html
        }
      }
    }
  }
`

像“localhost:8000/components/index_page”一样访问时效果很好

所以然后我尝试将它非常简单地导入页面，如下所示：

import React from "react"
import Header from "./components/header"
import Nav from "./components/nav"
import Footer from "./components/footer"
import { Container, Row, Col } from "react-bootstrap"
import IndexPage from "./components/index_page" <----- THIS

export default function PHBOGFC() {
  return (
    <div>
      <IndexPage /> <------ HERE
      <Header />
      <Nav />
      <Container fluid></Container>
      <img
        src="/phbogfc.svg"
        alt="The Preposterously Huge Book of Google Font Combinations"
      />
      <Footer />
    </div>
  )
}

但是我在浏览器中得到了这个错误，而不是直接访问组件时得到的输出：

在此处输入图像描述

我错过了什么步骤或命令？如果一个组件自己渲染得很好，为什么导入另一个页面（组件）时它不会渲染？

标签： javascriptreactjsgraphqlmarkdowngatsby

解决方案

在您的IndexPage组件中，您使用的是page query，它仅适用于页面（因此得名）组件。

可以渲染组件的唯一方法localhost:8000/components/index_page是创建一个类似的结构/src/pages/components/index_page.js，这是一种废话，因为组件应该是一个单独的实体。理想的结构应该如下所示：

/
|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /components
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

如果您在单独的组件中导入页面，则违反了页面查询规则，在这种情况下，您可能需要更改结构或使用StaticQuery（或useStaticQuery挂钩），这也有一些限制，但可能适用于您的用例.

推荐阅读