如何在 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

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

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

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