如何使用 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 SkillsPageexport 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 dangerouslySetInnerHTML={{ __html: skillsPage.skills }} />

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

如果您有一个要循环的对象/数组（技能数组），您应该通过以下方式打印它们：

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

更多信息dangerouslySetInnerHTML来自官方 React 文档。