内容丰富的文本中的无序列表呈现为 P 标签

Question

我在内容丰富的 space 中得到了要点列表，但出于某种原因它显示为 P 标签。我试过使用 LIST_ITEM 但结果仍然相同。我只需要显示要点。我想我缺少一种富文本类型，但我不确定是哪一种？

const options = {
    renderMark: {
        [BLOCKS.LIST_ITEM]: (children) => 
            <li style={{ fontSize: '60px', fontFamily: 'Montserrat' }}>{children}</li>,
    },
};

<ul className="leading-8">
    <li>{renderRichText(data.contentfulReports.fullDescription, options)}</li>
</ul>

这是我的查询

query MyBlogs($slug: String) {
    contentfulReports(slug: { eq: $slug }) {
        title
        slug
        summary {
            summary
        }
        table {
            tableData
        }
        fullDescription {
            raw
        }
        bannerImage {
            fluid {
              src
            }
        }
    }
};

Answer 1

尝试使用 renderNode 而不是 renderMark：

renderNode: {
      [BLOCKS.PARAGRAPH]: (node, children) => <p>{children}</p>,
      [BLOCKS.UL_LIST]: (node, children) => (
        <ul>{children}</ul>
      ),
      [BLOCKS.OL_LIST]: (node, children) => (
        <ol>{children}</ol>
      ),
      [BLOCKS.LIST_ITEM]: (node, children) => <li>{children}</li>,
}

在我们的例子中，我们查询的是 json 而不是 raw:

fullDescription {
      json
}

并使用 documentToReactComponents 函数：

import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
…
documentToReactComponents(fulldescription.json, options)

内容丰富的文本中的无序列表呈现为 P 标签

unordered list in contentful-rich-text rendering as P tags

reactjs

contentful

graphql