从 Dato 到 Gatsby 用 HTML 渲染数据答案

【问题标题】：Rendering data with HTML from Dato to Gatsby从 Dato 到 Gatsby 用 HTML 渲染数据
【发布时间】：2018-03-03 09:13:25
【问题描述】：

我将 datocms 用作无头 CMS，并将该数据带入 gatsby。我正在使用一个在 dato 中输出 HTML 的字段。您可以在此处查看 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

    }
  }
`

这是 gatby 的错误还是我的代码中缺少某些内容？

谢谢

【问题讨论】：

您的意思是页面不呈现段落吗？如果不是，那么我不太确定你在问什么

标签： gatsby

【解决方案1】：

很好，我想通了。

{data.datoCmsHomepage.mainText}需要放在sn-p下面...

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

【讨论】：