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

Question

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

这是组件：

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中。

谢谢你的帮助！

标签： reactjsiframe

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>
    );
  }
}