亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 WYSIWYG 呈現 DatoCms 降價文本?

如何使用 WYSIWYG 呈現 DatoCms 降價文本?

當年話下 2022-10-27 14:51:01
我有一個使用 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 輸出:
查看完整描述

1 回答

?
PIPIONE

TA貢獻1829條經驗 獲得超9個贊

它似乎與樣式問題有關。您可以嘗試將它們顯示為容器blockflex容器內。

我最近使用 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 文檔。


查看完整回答
反對 回復 2022-10-27
  • 1 回答
  • 0 關注
  • 98 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號