асинхронная загрузка iframe в реакции

Question

Я использую iframe на веб-странице, которая блокирует отображение остальной части страницы до полной загрузки iframe. Как включить асинхронную загрузку iframe (или задержать загрузку iframe), чтобы элемент веб-страницы не блокировался? * iframe не обеспечивает асинхронную загрузку.

Answer 1

Вы можете инициализировать iframe после вашего componentDidMount следующим образом:

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 после монтирования вашего компонента.