Блог

Главная - Вопросы по программированию - насыщенный насыщенный текст — пустой экран

насыщенный насыщенный текст — пустой экран

#javascript #reactjs #gatsby #contentful

Вопрос:

Я пытаюсь отобразить форматированный текст из этого запроса, но страница пуста. Я действительно в замешательстве, потому что в документах показан только пример того, как визуализируется ресурс изображения. Кто-нибудь может помочь??

Я пытаюсь показать форматированный текст в том формате, в котором он был написан, т. е. Первая строка должна быть выделена жирным шрифтом

 /* 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 amp;amp; 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>

Комментарии:

1. Разве ты не хочешь пройти мимо data.contentfulLongPost.body.raw ? Кроме того, вам не следует сбрасывать теги скриптов на свою страницу для загрузки React, если вы используете Gatsby.

Ответ №1:

У вас нет никакого bodyRichText поля, поэтому я не понимаю, почему вы разрушаете в:

 const { bodyRichText } = data.contentfulLongPost

Это извлекается из документов, где их структура данных имеет bodyRichText . Вы обращаетесь непосредственно к raw нему, чтобы вы могли его опустить. Предполагая, что ваш запрос работает (и это много, чтобы предположить, протестировать его localhost:8000/___graphql ), я думаю, что вы ищете:

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

Но я думаю, вам нужно будет больше настроить запрос. Я совсем не уверен, что вы правильно выбираете raw поле во всех случаях использования.

Комментарии:

1. я получаю эту ошибку:

2. Ошибка в объекте функции.invokeGuardedCallbackDev

3. если я консолирую.log(данные), я получаю raw

4. Вам нужно будет приложить больше усилий с вашей стороны… а у тебя есть data.contentfulLongPost ? Вы можете вставить его вывод???

5. Пожалуйста, не перегружайте разделы комментариев: вы отредактировали первый фрагмент (снова), поэтому структура данных изменилась (снова). Используйте это renderRichText(data.contentfulLongPost.body, options)

Метки: