如何使用 WYSIWYG 呈现 DatoCms 降价文本？

Question

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

这被格式化为后端的项目符号。

但是，在屏幕上它呈现为

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

这是代码：

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 文档中找到。使用提供的新信息，您的问题是呈现内容的方式。您应该使用dangerouslySetInnerHTML自动打印所见即所得（降价或富文本）中的内容<div&nbsp;dangerouslySetInnerHTML={{&nbsp;__html:&nbsp;skillsPage.skills&nbsp;}}&nbsp;/>在此之后，如果您有显示或布局问题，您可以检查我已经解释过的 CSS 属性。如果您有一个要循环的对象/数组（技能数组），您应该通过以下方式打印它们：{skillsPage.skills.map(skill&nbsp;=>&nbsp;<li&nbsp;key={skill}>{skill}</li)}更多信息dangerouslySetInnerHTML来自官方 React 文档。