如何将 Contentful 文本输出为 HTML 而不是 Gatsby 中的字符串？

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>

如何将 Contentful 文本输出为 HTML 而不是 Gatsby 中的字符串？

How to output Contentful text as HTML instead of a string in Gatsby?

reactjs

contentful

gatsby