如何将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组件存在某些安全问题，但如果您对您的设置足够安全感到满意，则可以使用特殊的dangerouslySetInnerHTMLReact属性，该属性将HTML字符串转换为实际标记。

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

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