Как вывести содержательный текст в виде HTML вместо строки в Гэтсби? - PullRequest
Новая
       16

Как вывести содержательный текст в виде HTML вместо строки в Гэтсби?

0 голосов
/ 27 октября 2019

Я не могу получить длинное текстовое поле в Contenful для правильного вывода в Гэтсби.

Я пробовал: 

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 в браузере. Что я делаю не так?

1 Ответ

1 голос
/ 27 октября 2019

Существуют определенные проблемы безопасности при вставке HTML-кода непосредственно из CMS в компонент React, но если вы уверены, что ваша установка достаточно безопасна, вы можете использовать специальный атрибут dangerouslySetInnerHTML React, который принимает строку HTML и преобразует еев фактическую разметку.

Используйте это с умом и найдите время, чтобы прочитать некоторые из проблем безопасности здесь, но при замене вашего <div> на следующий должен отображаться фактический HTML из вашей CMS. 

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