仅在生产中使用 Gatsby 和 Material UI 在第一次访问页面时消失 HTML

Question

我有一个 Gatsby 博客，其中包含使用 GraphQL 获取 Markdown 文件的 Material UI 组件。

在开发中，一切正常。gatsby build && gatsby serve然而，在生产 ( ) 中，当页面仅是第一页加载时，HTML 要么不显示，要么在页面加载后很快消失。如果我导航到另一个页面，然后再次返回，它会正确加载。

有趣的一点，当我做印刷术组件variant="h6"它工作正常，但variant="body1"还是没有variant无法正确加载。这让我觉得这与<p>标签有关。

我的内容是使用 GraphQL 从 .md 文件中获取的，并通过 Material-UI 组件进行解析，例如 <Typography align={props.align} dangerouslySetInnerHTML={{ __html: props.body }} />

这是第一页加载时检查器中显示空 DOM 的元素：

<div class="MuiGrid-root jss176 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6" style="background:#e0e0e0">
<p class="MuiTypography-root MuiTypography-body1 MuiTypography-alignJustify"></p>
</div>

我尝试过的事情：

1. 改变variant排版（如上）
2. 绕过模板组件，将 HTML 直接注入页面（无变化）
3. dangerouslySetInnerHTML用字符串替换（无变化）
4. 将 HTML 直接注入 Typography 而不危险地SetInnerHTML（渲染原始 HTML 很好）
5. 更换浏览器（无变化）
6. 清除缓存、删除 node_modules、gatsby clean重建等（无变化）

这是我的模板组件的一个示例：

function ImageBoxLeft(props) {
  const theme = useTheme();
  const classes = useStyles();
  return (
    <Grid className={classes.root} container spacing={0}>
      {props.title && (
        <Grid item xs={12}>
          <Typography align="center" className={classes.title} component="h2" variant="h2">{props.title}</Typography>
        </Grid>
      )}
      <Grid component={Img} fluid={props.image} className={classes.image} item xs={12} sm={6} />
      <Grid className={classes.text} style={{ background: props.scheme2 ? theme.palette.scheme2.card : theme.palette.scheme1.card  }} item xs={12} sm={6}>
        <Typography align={props.align} dangerouslySetInnerHTML={{ __html: props.body }} />
      </Grid>
    </Grid>
  )
}

这是网站页面的示例：

import React, { Fragment } from "react";
import { StaticQuery, graphql } from "gatsby";
import { ImageBoxLeft } from 'components/ImageBox'
import CardSection from 'components/CardSection'
import EmailIcon from '@material-ui/icons/MailOutline';

const buttons = [
  {
    text: 'Enquire about managing risk for your team',
    to: '/contact',
    icon: <EmailIcon />
  },
]

function About() {
  return (
    <Fragment>
      <StaticQuery
        query={graphql`
        query {
          image1: file(relativePath: { eq: "img/general/home_main.jpg" }) {
            childImageSharp {
              fluid(maxWidth: 900, maxHeight: 570) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
          about: markdownRemark(frontmatter: { name: { eq: "about" } }) {
            html
            frontmatter {
              title
            }
          }
        }
      `}
        render={data => (
          <Fragment>
            <CardSection
              title="About Us"
              buttons={buttons}
              scheme2
            >
              <ImageBoxLeft
                align="justify"
                image={data.image1.childImageSharp.fluid}
                body={data.about.html}
                scheme2
              />
            </CardSection>
          </Fragment>
        )}
      />
    </Fragment>
  )
}

export default About

还有我的包裹：

"dependencies": {
    "@material-ui/core": "^4.9.2",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.9.0",
    "gatsby": "^2.19.14",
    "gatsby-image": "^2.2.34",
    "gatsby-plugin-canonical-urls": "^2.1.13",
    "gatsby-plugin-feed": "^2.3.19",
    "gatsby-plugin-google-analytics": "^2.1.23",
    "gatsby-plugin-html-attributes": "^1.0.5",
    "gatsby-plugin-material-ui": "^2.1.6",
    "gatsby-plugin-preconnect": "^1.0.3",
    "gatsby-plugin-react-helmet": "^3.1.22",
    "gatsby-plugin-robots-txt": "^1.4.0",
    "gatsby-plugin-sharp": "^2.2.32",
    "gatsby-plugin-sitemap": "^2.2.19",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
    "gatsby-remark-copy-linked-files": "^2.1.28",
    "gatsby-remark-images": "^3.1.34",
    "gatsby-source-filesystem": "^2.1.39",
    "gatsby-transformer-remark": "^2.6.38",
    "gatsby-transformer-sharp": "^2.3.6",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-helmet": "^5.2.1",
    "react-twitter-embed": "^3.0.3"
  }

Answer 1

因此，解决方案是使 Typography 组件 a<div>避免<p>来自上面 Lucas Araujo 评论的嵌套标签，并根据此https://github.com/gatsbyjs/gatsby/blob/717ee6eede217189820af2a644706a257e0a9623/packages/gatsby添加一个键缓存目录/default-html.js#L19

而这个https://github.com/gatsbyjs/gatsby/issues/2750#issuecomment-341765585

而这个https://github.com/facebook/react/issues/5479

所以我的新工作组件看起来像：

import React from "react";
import { makeStyles } from '@material-ui/core/styles';
import {
  Box,
  Typography
} from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(0),
    margin: theme.spacing(0)
  }
}));

function ArticleBody(props) {
  const classes = useStyles();
  return (
    <Box className={classes.root}>
      <Typography
        key={props.key}
        color={props.color ? props.color : "default"}
        align={props.align ? props.align : 'justify'}
        variant={props.variant ? props.variant : 'body1'}
        component="div"
        dangerouslySetInnerHTML={{ __html: props.content }}
      />
    </Box>
  )
}

export default ArticleBody

感谢您的帮助 Lucas Araujo！