如何在Gatsby中将内容文本输出为HTML，而不是字符串？

Question

我无法在Contenful中获得长文本字段以在Gatsby中正确输出。

我尝试过：

const ProjectPost = ({ data }) => {
  const { title, body } = data.contentfulProject
  return (
    <Layout>
      <SEO title={title} />
      <div className="blogpost">
        <h1>{title}</h1>
        <div>{body.body}</div>
      </div>
    </Layout>
  )
}

export default ProjectPost

export const pageQuery = graphql`
  query($slug: String!) {
    contentfulProject(slug: { eq: $slug }) {
      title
      slug
      body {
        body
      }
    }
  }
`

那个{body.body}输出的内容没有任何标记。这只是用引号引起来的几段内容。

如果我这样做：

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

const ProjectPost = ({ data }) => {
  const { title, body } = data.contentfulProject
  return (
    <Layout>
      <SEO title={title} />
      <div className="blogpost">
        <h1>{title}</h1>
        <div>{body.childMarkdownRemark.html}</div>
      </div>
    </Layout>
  )
}

export default ProjectPost

export const pageQuery = graphql`
  query($slug: String!) {
    contentfulProject(slug: { eq: $slug }) {
      title
      slug
      body {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`

它输出用引号引起来的HTML，但不会在浏览器中解析为HTML。我在做什么错？

Answer 1

直接从CMS将HTML插入React组件时存在某些安全问题，但是如果您对自己的设置足够安全感到满意，则可以使用特殊的dangerouslySetInnerHTML React属性，该属性接受HTML字符串并将其转换为实际加价。

[明智地使用它，花点时间阅读这里的一些安全问题，但是用以下内容替换<div>应该会显示来自CMS的实际HTML。

<div dangerouslySetInnerHTML={{ __html: body.childMarkdownRemark.html }}></div>