如何使用所见即所得呈现 DatoCms 降价文本？

Question

我有一个使用 GatsbyJS 的 DatoCms 站点，其中包括一个使用 markdown 编辑器的 markdown 编辑器字段。

这被格式化为后端的项目符号点。然而，在屏幕上它呈现为这个

如何使文本正确呈现为项目符号点？

代码如下：

import React from 'react'
import { Link, graphql } from 'gatsby'
import Masonry from 'react-masonry-component'
import Img from 'gatsby-image'
import Layout from "../components/layout"
import SEO from '../components/SEO'

const SkillsPage = ({ data : { skillsPage }}) => (
  <Layout>
  <SEO/>
    <div className="showcase">
        <h1 className="sheet__title">{skillsPage.title}</h1>   
        <div>
          {skillsPage.skills}
        </div> 
    </div>
  </Layout>
)

export default SkillsPage

export const query = graphql`
  query SkillsPageQuery {
    skillsPage: datoCmsSkillPage {
        title
        skills
    }
  }
`

并且 HTML 输出：

Answer 1

似乎与样式问题有关。您可以尝试将它们显示为 block 或 flex 容器。

我最近在使用 DatoCMS 及其所见即所得的过程中遇到的一件事是段落显示不正确，没有继承换行符。它可以通过使用 CSS 属性 white-space: pre-line 来轻松修复。也许它也解决了这个问题。

有关 white-space 属性的更多信息，请参见 MDN documentation。

根据提供的新信息，您的问题是呈现内容的方式。您应该使用 dangerouslySetInnerHTML 自动打印所见即所得的内容（降价或富文本）

<div dangerouslySetInnerHTML={{ __html: skillsPage.skills }} />

在此之后，如果您有显示或布局问题，您可以检查我已经解释过的 CSS 属性。

如果您有 object/array 循环（技能组合），您应该通过以下方式打印它们：

{skillsPage.skills.map(skill => <li key={skill}>{skill}</li)}

有关 dangerouslySetInnerHTML 的更多信息来自 official React documentation。

如何使用所见即所得呈现 DatoCms 降价文本？

How do I render DatoCms markdown text using WYSIWYG?

javascript

content-management-system

reactjs

gatsby