Question

我在我的主页上实现了材料-ui纸张组件，一切都按预期工作。但当我转到另一个页面并返回主页时，纸质组件消失了，只有文本呈现，我可能知道错误是什么吗？

这是我的代码：

render() {
// const { showFixedMenu, hideFixedMenu } = this.props;
return (
  <div className={styles.Home}>
    <Helmet title="Home" />

    <Paper elevation={10} style={STYLE.paperStyle} >
      <Typography variant="headline" component="h3">
     hELLO WIORLS
      </Typography>
      <Typography component="p">
     Paper can be used to build surface or other elements for your application.
      </Typography>
    </Paper>
  </div>
);}

现在屏幕上有什么： paper component not appearing on website

修改：我能够通过使用名为“Lazyload”的库来解决我的问题。这加速了Web应用程序的呈现。如果有人遇到类似问题，您可以使用此库来解决问题。

更新代码（工作）：

主页

  render() {
        return (
          <LazyLoad>  <--- This library solve my problem 
            <HomeContent2 />
          </LazyLoad>
        );
      }
    }

HomeContent2

import type { Element } from 'react';
import React from 'react';
import { Image } from 'semantic-ui-react';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import InViewMonitor from 'react-inview-monitor';
import ProductContent1 from '../../components/ProductContent1/index';
import styles from '../../containers/Home/styles.scss';


const STYLE = {
  paperStyle: {
    width: '95%',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: '2%',
    height: '90vh',
    square: false,
  },
};

const HomeContent2 = (): Element<'div'> => (

  <div>
    <Paper elevation={6} style={STYLE.paperStyle} >

      <InViewMonitor   // for animation effect
        classNameNotInView="vis-hidden"
        classNameInView="animated fadeInUp"
      >
        <div className={styles.Content}>
          <div className={styles.left}>
            <Typography component="h1">
              <ProductContent1 product={0} />
            </Typography>
          </div>

          <div className={styles.right}>
            { /* Product 1 image goes here */ }
            <Image
              src="https://admin.neruti.com/wp-content/uploads/2018/06/more-info.png"
            />
          </div>
        </div>
      </InViewMonitor>
    </Paper>
  </div>
);


export default HomeContent2;

Answer 1

Here is the sample code

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Paper elevation={4}>
        <Typography variant="headline" component="h3">
          This is a sheet of paper.
        </Typography>
        <Typography component="p">
          Paper can be used to build surface or other elements for your
          application.
        </Typography>
      </Paper>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Make sure you user material-ui core library - https://material-ui.com/demos/paper/ I'm using @material-ui/core version - 1.2.2

Link to my sample example - https://codesandbox.io/s/myn083p6xx

Material-ui纸张不会在屏幕上呈现

1 个答案: