错误的富文本列表并合并到其他字符串 - React 网站答案

【问题标题】：Bad rich text listing and merge to other strings - React website错误的富文本列表并合并到其他字符串 - React 网站
【发布时间】：2022-01-21 05:55:35
【问题描述】：

我在内容模型中有普通字符串类型，但最后一种是富文本。

我将添加一张卡片，其中包含帖子的名称、标题、日期和简短的帖子文本。在这种情况下，我重置了富文本格式，使其表现得像普通文本。

问题是在列出所有帖子时，正常字符串会按需要显示，但富文本与每个帖子重复。我希望每个人的帖子公告都不同。

我已经查看并尝试了所有已知的方法，但都没有达到预期的结果。

从视觉上看，列表如下所示：

此页面的代码如下所示：

import React from "react"
import { graphql } from 'gatsby'
import { BLOCKS, MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"

import Layout from "../components/base/layout"

import {
  PageWrapper,
  BlogCardWrapper,
  BlogCardElement,
  ThumbnailImage,
  ContentInlineWrapper,
  PreContentParagraph,
  ReadMoreParagraph,
  BlogTitleHeader,
  BlogDateParagraph,
} from "../styles/aktualnosci.style"

import { Headers } from "../utils/data/headersData"
import H1 from "../components/headers/h1"

const AktualnosciPage = ({ data }) => {
  
  const articles = data.allContentfulArtykul.edges
  const post = articles[0].node.content
  const option = {
    renderNode: {
      [BLOCKS.EMBEDDED_ASSET]: node => {
          return <img/>
      },
      [BLOCKS.HEADING_1]: (node, children) => {
          return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
      },
      [BLOCKS.HEADING_5]: (node, children) => {
          return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
      },
      [BLOCKS.PARAGRAPH]: (node, children) => {
          return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
      },
      [BLOCKS.QUOTE]: (node, children) => {
          return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
      },
      [BLOCKS.UL_LIST]: (node, children) => {
          return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
      },
      [BLOCKS.LIST_ITEM]: (node, children) => {
          return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
      },
    },
    renderMark: {
      [MARKS.BOLD]: (node, children) => {
          return <p style={{fontWeight: '100'}}>{children}</p>
      },
    }
  }
  const output = renderRichText(post, option)

  return (
    <Layout>
      <PageWrapper>
        <H1 name={ Headers.Aktualnosci }/>
        <BlogCardWrapper>
          {articles.reverse().map(({node}) => {
            return (
              <div key={node.slug}>
                <a href={"/aktualnosci/" + node.slug}>
                  <BlogCardElement>
                    <ThumbnailImage
                      className="j10_dfg4gvBDG"
                      src={node.thumbnailPhoto.fluid.src}
                      srcSet={node.thumbnailPhoto.fluid.srcSet}
                    />
                    <ContentInlineWrapper>
                      <BlogTitleHeader>{node.title}</BlogTitleHeader>
                      <PreContentParagraph>{output}</PreContentParagraph>
                      <BlogDateParagraph>{node.createdAt}</BlogDateParagraph>
                    </ContentInlineWrapper>
                    <ReadMoreParagraph className="j5_dfg4gvBDG">Czytaj więcej <span style={{color: '#BF1E2D', fontSize: '11px'}}>&#10148;</span></ReadMoreParagraph>
                  </BlogCardElement>
                </a>
              </div>
            )
          })}
        </BlogCardWrapper>
      </PageWrapper>
    </Layout>
  )
}

export const query = graphql`
    query {
      allContentfulArtykul {
        edges {
          node {
            id
            thumbnailPhoto {
              fluid {
                src
                srcSet
              }
            }
            title
            slug
            content {
              raw
              references {
                ... on ContentfulAsset {
                  __typename
                  contentful_id
                  fixed(width: 200) {
                    src
                    srcSet
                  }
                }
              }
            }
            createdAt(formatString: "YYYY-MM-DD")
          }
        }
      }
    }
`

export default AktualnosciPage

非常感谢您的帮助

【问题讨论】：

标签： javascript reactjs graphql richtext

【解决方案1】：

经过长时间的搜索，我找到了一个解决方案

首先，您必须将与富文本相关的所有内容移至列表

你需要做的第二件事是把它变成一个固定的帖子路径

const post = node.content

最后，我们用适当的参数在目的地使用整个函数

<PreContentParagraph>{renderRichText(post, option)}</PreContentParagraph>

【讨论】：