reactjs - 向类组件添加 const 以在 Gatsby 站点中显示来自 Contentful CMS 的数据

Question

我正在附加一个指向在 GraphQL 中显示查询的图像的链接我在 Gatsby 网站中开始显示 Contentful 的内容时遇到问题。我已经确定了哪些查询将访问一个简单的文本字段数据。我很困惑如何将此数据添加到构建我的页面的类组件中。我想我在返回部分的 JSX 下面有一个正确的代码，但我不知道如何将数据传递给组件。

下面是我从 CMS 中获取数据的代码：

const data = useStaticQuery(graphql`
    query {
        allContentfulHomepage{
          edges {
            node {
              section1Title
            }
          }

        }
      }
  `)

我想将它添加到这样的有状态组件中：

class IndexPage extends React.Component { }

我认为我的问题在于数据的传递，但下面我还展示了如何返回它：

<div className = "section-text small-text" > {
    data.allContentfulHomepage.edges.map((edge) => {
        return ( 
            <h2> {
                edge.node.section1Title
            } 
            </h2>
        )
    })
} 
</div>

标签： reactjsgatsbycontentful