Question

我有一个instagram小部件，可以使用iframe，但是当我在路线之间切换时，小部件加载速度太慢，没有时间正确渲染。您能告诉我，如何设置组件的延迟渲染，这是该问题的另一种解决方案吗？

以下是组件：

import React, { Component } from 'react';
const divStyle = [
  {
    border: 'none',
    overflow: 'hidden',
    width: '100%'
  },
  {
    font: "10px/14px 'Roboto','Helvetica Neue',Arial,Helvetica,sans-serif",
    fontWeight: '400',
    width: '100%',
    textAlign: 'right'
  },
  {
    color: '#777',
    textDecoration: 'none'
  }
];

class Instagram extends Component {
  render() {
    return (
      <div id="instagram">
        <iframe src="https://snapwidget.com/embed/711808" className="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style={divStyle[0]}></iframe>
      </div>
    );
  }
}

export default Instagram;

代码也位于CodeSandbox中。

感谢您的帮助！

Answer 1

您可以使用state进行渲染，

class Instagram extends Component {
  state={
     show: false
  }
  componentDidMount(){
     setTimeout(()=>{
        this.setState({show: true})
     },5000) //runs after 5sec
  }
  render() {
    return (
      <div id="instagram">
        { this.state.show && <iframe src="https://snapwidget.com/embed/711808" className="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style={divStyle[0]}></iframe> }
      </div>
    );
  }
}

Answer 2

这可能是您的代码沙箱中的解决方案。

注意：请用loading div替换您的装载器。

CodeSandbox：https://codesandbox.io/s/damp-platform-950yw

import React, { Component } from "react";

const divStyle = [
  {
    border: "none",
    overflow: "hidden",
    width: "100%"
  },
  {
    font: "10px/14px 'Roboto','Helvetica Neue',Arial,Helvetica,sans-serif",
    fontWeight: "400",
    width: "100%",
    textAlign: "right"
  },
  {
    color: "#777",
    textDecoration: "none"
  }
];

class Instagram extends Component {
  state = {
    loading: true
  }
  handelOnLoad = () => {
    this.setState({
      loading: false
    })
  }
  render() {
    return (
      <>
        {this.state.loading && <div style={{
          position: "fixed",
          background: "rgba(0,0,0,0.7)",
          top: 0,
          bottom: 0,
          right: 0,
          left: 0,
          color: "#fff"
        }}>Loading</div>}
        <div id="instagram">
          <iframe
            src="https://snapwidget.com/embed/711808"
            className="snapwidget-widget"
            allowtransparency="true"
            frameborder="0"
            scrolling="no"
            style={divStyle[0]}
            onLoad={this.handelOnLoad}
          />
        </div>
      </>
    );
  }
}

export default Instagram;

如何在React中延迟组件渲染？

2 个答案: