如何使用 Gatsby 显示所有 Markdown 帖子及其 HTML 内容的列表

Question

最近，我一直在学习 Gatsby.js 和 GraphQL，并且一直在做一个小项目。我对这个项目的目标是只有一个页面来显示页面上的所有帖子，这意味着没有 slug 等引用特定页面，只需将所有降价文件转换为我拥有的模板，然后全部在一个页面上。我的意思的一个例子如下：

查看 Gatsby 文档，我可以看到 how to make a list of markdown "blogs"，但它们只是您本质上单击以将您带到实际帖子页面的链接，这不是我想要的

我尝试做类似的事情，但我的问题是我不能真正将 HTML 传递给我的组件，因为它由许多 UI 组件（材料 UI 卡组件）组成。例如，我的 index.js 文件中有这样的内容，显示我的所有帖子

  const Posts = edges
    .filter(edge => !!edge.node.frontmatter.question)
    .map(edge => <Grid item xs={8}><PostCard key={edge.node.id} question={edge.node.frontmatter.postTitle} postContents={}/></Grid>)

显然存在问题，我不能将危险的SetInnerHTML 传递给postContents。我可以通过 edge.node.html 但 HTML 标签本身会显示在内容中。我知道有一个更好的方法可以做到这一点，它利用我的模板文件夹中的模板文件，但我不确定如何使用，我没有运气在 stackoverflow 或 Gatsby 文档上找到很多关于此的内容。

不胜感激任何有关如何实现此结果的见解

谢谢！

Answer 1

如果您不能将 dangerouslySetInnerHTML 传递到 postContents，那么您可以将边缘或节点本身传递进去，然后更新该组件以设置 div 的内部 html。

所以你的明信片看起来像：

export default function PostCard({ node }) {
  return (
    <div key={node.id}>
      <h1>{node.frontmatter.postTitle}</h1>
      <div dangerouslySetInnerHTML={{ __html: node.html }} />
    </div>
  );
}

您的 index.js 可以简化为：

const Posts = edges
    .filter(edge => !!edge.node.frontmatter.question)
    .map(edge => <Grid item xs={8}><PostCard node={edge.node} /></Grid>)