使用HTML从Dato到Gatsby呈现数据

Question

我正在使用datocms作为无头CMS并将这些数据带入gatsby。我正在使用输出HTML的dato字段。您可以在此处查看graphQL查询结果。

{
 "data": {
"datoCmsHomepage": {
  "mainTextNode": {
    "id": "DatoCmsHomepage-207812-enMainTextTextNode",
    "mainText": "<p>Some text here.</p>"
  },
  "mainText": "<p>Some text here.</p>" <-- THIS IS MY ISSUE LINE
 }
}
}

但是当我把它带到gatsby时，页面会在页面上呈现段落标记

这是我的代码

const IndexPage = ({ data }) => (

<div>
 <Jumbotron fluid className="sydbg text-right text-light">
    <Container>
    <Row>
      <Col sm="12" md={{ size: 7, offset: 5 }}>
        <h1 className="display-3">{data.datoCmsHomepage.mainHeading}</h1>
        <p className="lead">{data.datoCmsHomepage.introText}</p>
        <hr className="my-2" />        
        <p >
          <Button color="danger">Book now</Button>
        </p>
        </Col>
    </Row>
  </Container> 
 </Jumbotron>

 <Container className="text-center">
  <Row>
    <Col>
      <h2>{data.datoCmsHomepage.subHeading}</h2>
      {data.datoCmsHomepage.mainText}
    </Col>
  </Row>
</Container>

</div>

)

export default IndexPage

export const query = graphql`
  query IndexPageQuery {
    datoCmsHomepage {
      mainHeading
      introText
      subHeading
      mainText

    }
  }
`

这是gatsby的错误还是我在代码中遗漏了什么？

谢谢

Answer 1

一切都很好，我想通了。

{data.datoCmsHomepage.mainText}需要放在下面的代码段内...

<div dangerouslySetInnerHTML={{ __html: data.datoCmsHomepage.mainText }} />