如何將從 graphql API 獲取的數據傳遞給 React class 組件

Question

根據 gatsby 文檔，我們可以將數據作為數據參數傳遞給功能組件（來源： https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-source-graphql/src/pages/index. js ），我如何將這些數據傳遞給 class 組件

    import React from "react"
    import Layout from "../../components/layout"
    import { Row, Col, Button, Form, Pagination } from "react-bootstrap"
    import { Link } from "gatsby"
    import { Subscribe } from "../../components/stories/subscribe"

   export default class Home extends React.Component {
      state = {
      }


      render(data) {
        return (
          <Layout>
            <Subscribe />
            <Form>
              <Row>IIIIIIIIIIIIIIIIIIIIIIIIIIIIII</Row>
              <Row>{JSON.stringify(data)}</Row>
              <Row>IIIIIIIIIIIIIIIIIoooIIIIIIIIIIIII</Row>
              <Row></Row>
              </div>
            ))}
            <Row>
              <Pagination>
                <Pagination.Prev> Prev</Pagination.Prev>
              </Pagination>
              <Col xs={8}></Col>
              <Pagination>
                <Pagination.Next> Next</Pagination.Next>
              </Pagination>
            </Row>
          </Layout>
        )
      }
    }

    export const query = graphql`
      query {
        api {
          publicfeed {
            total
            posts {
              id
              content
            }
          }
        }
      }
    `

Answer 1

頁面查詢的數據在 props 中可用，而不是作為渲染的參數。 你可以像 this.props.data 一樣訪問它

export default class Home extends React.Component {
      state = {
      }


      render() {
        const { data } = this.props;
        return (
          <Layout>
            <Subscribe />
            <Form>
              <Row>IIIIIIIIIIIIIIIIIIIIIIIIIIIIII</Row>
              <Row>{JSON.stringify(data)}</Row>
              <Row>IIIIIIIIIIIIIIIIIoooIIIIIIIIIIIII</Row>
              <Row></Row>
              </div>
            ))}
            <Row>
              <Pagination>
                <Pagination.Prev> Prev</Pagination.Prev>
              </Pagination>
              <Col xs={8}></Col>
              <Pagination>
                <Pagination.Next> Next</Pagination.Next>
              </Pagination>
            </Row>
          </Layout>
        )
      }
    }