在反应中异步加载iframe

Question

我正在网页上使用iframe，该iframe会阻止页面的其余部分呈现，直到iframe完全加载为止。如何启用异步iframe加载（或延迟iframe的加载），以便不阻止网页元素？ * iframe不提供异步加载。

Answer 1

您可以在componentDidMount之后初始化iframe，如下所示：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showIframe: false
        };
    }

    componentDidMount() {
        this.setState({showIframe: true});
    }

    render() {
        const { showIframe } = this.state;
        return (
            <div>
                { showIframe && 
                    <iframe src={'https://www.example.com'} />
                }
            </div>
        );
    }
}

这将在您的组件安装后呈现iframe。