内容丰富的富文本 - 空白屏幕

Question

我正在尝试从该查询中呈现富文本，但页面是空白的。我真的很困惑，因为文档只显示了如何呈现图像资产的示例。有人可以帮忙吗？？

我正在尝试以内容丰富的格式显示富文本，即第一行应该是粗体

/* 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';
import { renderRichText } from "gatsby-source-contentful/rich-text"
import { BLOCKS, MARKS } from "@contentful/rich-text-types"

export const query = graphql`
query MyQuery($slug: String) {
    contentfulLongPost(Slug: {eq: $slug}) {
      title
      updatedAt(formatString: "MMMM Do, YYYY")
      body {
        raw
      }
    }
  }
  
`;


const options = {
  renderMark: {
    [MARKS.BOLD]: (text) => <span>{text}</span>
    
  },
  
}



const CaseStudy = ({data}) => {
    const { bodyRichText } = data.contentfulLongPost


     

    return (
        <Layout>
        <div>   {bodyRichText && renderRichText(bodyRichText, options)}</div>
        </Layout>
    );
};

export default CaseStudy;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您没有任何 bodyRichText 字段，所以我不明白您为什么要解构：

const { bodyRichText } = data.contentfulLongPost

这是从文档中提取的，其中它们的数据结构具有 bodyRichText。您正在直接访问 raw，因此您可以省略它。假设您的查询有效（假设很多，请在 localhost:8000/___graphql 对其进行测试），我认为您正在寻找：

const CaseStudy = ({data}) => {
    return (
        <Layout>
        <div>   {data.contentfulLongPost.body && renderRichText(data.contentfulLongPost.body, options)}</div>
        </Layout>
    );
};

但我想您需要对查询进行更多调整。我完全不确定您是否在所有用例中正确获取 raw 字段。

内容丰富的富文本 - 空白屏幕

contentful rich text - blank screen

javascript

reactjs

contentful

gatsby