在反应中异步加载 iframe

Question

我在网页上使用 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。