Javascript 有内容的呈现长文本

我正在研究如何呈现标准的长文本，但有一些问题

请看一看我的查询，当在graphQL操场上运行时，它正在工作

{
  allContentfulArticle {
    nodes {
      title
      slug
      para {
        para
      }
    }
  }
}

这是我的article.js文件

import React from "react"
import { graphql } from "gatsby"
 

const Article = props => (
  <div>
    <header>
      <h1>{props.data.site.siteMetadata.title}</h1>
    </header>

    <main>
      <h1>{props.data.contentfulArticle.title}</h1>
    </main>

    <footer>
    <p>{props.data.site.siteMetadata.author}</p>
    </footer>
  </div>
)

export default Article

export const query = graphql`
  query Article($id: String) {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
    contentfulArticle(id: { eq: $id }) {
      title
      subtitle
      slug
      para {
        para
      }
    }
  }
`

从“React”导入React
从“盖茨比”导入{graphql}
const Article=props=>(
{props.data.site.siteMetadata.title}
{props.data.contentfulArticle.title}
{props.data.site.siteMetadata.author}

)
导出默认项目
export const query=graphql`
查询文章（$id:String）{
场地{
站点元数据{
标题
描述
作者
}
}
contentfulArticle（id:{eq:$id}）{
标题
字幕
鼻涕虫
帕拉{
对位
}
}
}
`

奇怪的是，我可以很容易地呈现

标题

，这是一种类似的内容类型-只是很短

我可以在本地主机上看到我的

标题

，

slug

和其他元数据字段，但看不到

段落

段落

---

尽管GraphQL查询看起来很完美，但您没有呈现长文本字段。只需使用：

import React from "react"
import { graphql } from "gatsby"
 

const Article = props => (
  <div>
    <header>
      <h1>{props.data.site.siteMetadata.title}</h1>
    </header>

    <main>
      <h1>{props.data.contentfulArticle.title}</h1>
    </main>
    <p>Your long text is: {props.data.contentfulArticle.para.para}</p>
    <footer>
    <p>{props.data.site.siteMetadata.author}</p>
    </footer>
  </div>
)

export default Article

export const query = graphql`
  query Article($id: String) {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
    contentfulArticle(id: { eq: $id }) {
      title
      subtitle
      slug
      para {
        para
      }
    }
  }
`

从“React”导入React
从“盖茨比”导入{graphql}
const Article=props=>(
{props.data.site.siteMetadata.title}
{props.data.contentfulArticle.title}
您的长文本是：{props.data.contentfulArticle.para.para}

{props.data.site.siteMetadata.author}

)
导出默认项目
export const query=graphql`
查询文章（$id:String）{
场地{
站点元数据{
标题
描述
作者
}
}
contentfulArticle（id:{eq:$id}）{
标题
字幕
鼻涕虫
帕拉{
对位
}
}
}
`

太好了，谢谢-不太确定我怎么会错过这个！我选择渲染长文本，因为我在使用新的

raw

子字段渲染富文本时遇到了重大问题。你介意看看这个问题吗当然，我会的。如果问题已解决，请接受答案以结束问题：）