内容丰富的文本未呈现

Posted 2023-03-08

【中文标题】内容丰富的文本未呈现

【英文标题】：contentful rich text not rendering

【发布时间】：2021-11-14 03:20:17

【问题描述】：

我正在尝试注销原始文件，但到目前为止我无法在控制台中获取任何内容。它只是显示为一个空数组。我的查询一定有问题，因为我在文档上只能找到如何呈现 ContentfulAsset 而不是我可以用 CSS 格式化的实际文本

/* eslint-disable */
import React from 'react';
import  Helmet  from 'react-helmet';
import  graphql  from 'gatsby';
import Layout from '../components/layout';
import  documentToReactComponents  from '@contentful/rich-text-react-renderer';

export const query = graphql`
    query MyQuery($slug: String) 
        contentfulLongPost(Slug:  eq: $slug ) 
            title
            updatedAt(formatString: "MMMM Do, YYYY")
            body 
                raw
                references 
                    ... on ContentfulAsset 
                        contentful_id
                        __typename
                    
                
            
            free
            contentType
        
    
`;

const caseStudy = (props) => 
    console.log(props);

    

    return (
        <Layout>
        
        </Layout>
    );
;

export default caseStudy;

我在 __typename 后面放什么来获取原始数据？

查询 MyQuery($slug: String) contentfulLongPost(Slug: eq: $slug) 标题 updatedAt(formatString: "MMMM Do, YYYY") 身体 生的

`;

【问题讨论】：

__typename 在 ContentfulAsset 内，但您说在呈现富文本时遇到问题，这是一个 raw 字段。你能澄清一下吗？另外，能否说明一下如何获取组件中的数据？

嗨，对不起，我的意思是生的。基本上，你能告诉我如何在屏幕上呈现我的原始身体，即富文本吗？

如果您甚至没有获取它（空数组），您将无法显示它，因此您的查询可能存在问题。这就是为什么我要求您提供如何在组件/页面中打印该数据，以便进行更多调试

我编辑了这个问题，我只是退出道具看看那里有什么。我认为使用 ContentfulAsset 是错误的，但我不确定还能使用什么？

【参考方案1】：

那里有一些问题...caseStudy 必须是 CaseStudy，因为它是一个 React 组件，否则，它将被解释为一个 html 元素，这显然会破坏您的代码（<caseStudy> 不会存在……但）。

即使ContentfulAsset 片段是错误的，如果你的查询是正确的，你应该在raw 字段（位于props.data.contentfulLongPost.raw）中得到一些东西，所以再次检查它。如果您只是想打印富文本，而您的查询不会中断，您可以打印 raw 内部的内容，而 ContentfulAsset 片段中没有数据。

如果$slug 变量持有的过滤器可能有什么问题，因此即使查询正确，您也无法获取数据，因为没有任何数据要获取。

一旦您确保您的数据被正确提取（您在 props.data 中有数据），您可以通过将数据提升到以下位置来自定义输出：

import  BLOCKS, MARKS  from "@contentful/rich-text-types"
import  renderRichText  from "gatsby-source-contentful/rich-text"
​
const Bold = ( children ) => <span className="bold">children</span>
const Text = ( children ) => <p className="align-center">children</p>
​
const options = 
  renderMark: 
    [MARKS.BOLD]: text => <Bold>text</Bold>,
  ,
  renderNode: 
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>children</Text>,
    [BLOCKS.EMBEDDED_ASSET]: node => 
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>JSON.stringify(node, null, 2)</code>
          </pre>
        </>
      )
    ,
  ,

​
renderRichText(node.bodyRichText, options)

来源：https://www.contentful.com/developers/docs/tutorials/general/rich-text-and-gatsby/

可以在https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer查看（几乎是复制/粘贴）完整的可定制示例

这个想法是创建一个自定义对象，该对象将使用自定义 HTML/React 组件解析您获取的数据：

import  BLOCKS, MARKS  from "@contentful/rich-text-types"
import  renderRichText  from "gatsby-source-contentful/rich-text"

const Bold = ( children ) => <span className="bold">children</span>
const Text = ( children ) => <p className="align-center">children</p>

const options = 
  renderMark: 
    [MARKS.BOLD]: text => <Bold>text</Bold>,
  ,
  renderNode: 
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>children</Text>,
    [BLOCKS.EMBEDDED_ASSET]: node => 
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>JSON.stringify(node, null, 2)</code>
          </pre>
        </>
      )
    ,
  ,


function BlogPostTemplate( data ) 

  return <div>data.contentfulBlogPost && renderRichText(data.contentfulBlogPost, options)</div>

其中BlogPostTemplate 代表您的CaseStudy，contentfulBlogPost 代表您的contentfulLongPost。

总结：

修复组件命名 检查里面有什么props.data.contentfulLongPost.raw 使用提供的slug 检查您是否有任何数据。您可以强制 localhost:8000/___graphql 中 slug 的值来检查哪些数据正在获取您的查询。 使用options 对象和renderRichText 助手自定义输出

【讨论】：

嗨，当我注销 props.data.contentfulLongPost.body.raw 但在一个对象中时，我正在获取数据，但我仍然不知道在查询中输入什么？

如果您收到raw，您的查询没问题。要显示它，请按照答案和提供的文档

但文档说我需要使用参考？在什么时候我使用它，我编辑了我的问题以反映我的查询现在的样子。我觉得我现在越来越近了..

您的问题字面意思是：“内容丰富的富文本未呈现”文档将代码基于特定的数据结构。如果您没有参考资料，请不要使用它们。不要指望复制/粘贴。在文档中references 代表ContentfulAsset，它代表添加的所有资产，而不是内容仪表板中的纯资产（图像等）。您必须根据您的字段和名称调整您的查询，所有这些都可以在localhost:8000/___graphql 轻松访问，只需单击字段，您就会看到里面的内容，您就可以创建查询，只需复制/粘贴它跨度>

所以我现在的查询应该有效吗？如果我正确显示它？