React Portals — выполнить функцию, которая ссылается на DOM нового окна

Я пытаюсь создать портал React, который при монтировании требует запуска определенной строки для загрузки компонента ActiveReports Designer.

Вот мой код портала:

constructor(props: IWindowPortalProps) {
        super(props);
        this.containerEl = document.createElement('div'); // STEP 1: create an empty div
        this.containerEl.id = 'designer-host';
        this.containerEl.className = styles.designerHost;
        this.externalWindow = null;
    }

    private copyStyles = (sourceDoc: Document, targetDoc: Document) => {
        Array.from(sourceDoc.styleSheets).forEach(styleSheet => {
            if (styleSheet.cssRules) { // true for inline styles
                const newStyleEl = sourceDoc.createElement('style');

                Array.from(styleSheet.cssRules).forEach(cssRule => {
                    newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
                });

                targetDoc.head.appendChild(newStyleEl);
            } else if (styleSheet.href) { // true for stylesheets loaded from a URL
                const newLinkEl = sourceDoc.createElement('link');

                newLinkEl.rel = 'stylesheet';
                newLinkEl.href = styleSheet.href;
                targetDoc.head.appendChild(newLinkEl);
            }
        });
    }

    componentDidMount() {
        this.externalWindow = window.open('', '', `height=${window.screen.height},width=${window.screen.width}`);
        this.externalWindow.document.body.appendChild(this.containerEl);

        this.externalWindow.document.title = 'A React portal window';
        
        this.externalWindow.addEventListener('load', () => {
            new Designer('#designer-host');    
        });
    }

    render() {
        return ReactDOM.createPortal(null, this.containerEl);
    }

Однако, когда новое окно загружается, я получаю сообщение об ошибке

Error: Cannot find the host element. at Function.<anonymous>

что указывает на отсутствие div designer-host. Я думаю, что функция загрузки указывает на основной DOM, а не на новое окно.

В качестве альтернативы я попытался добавить файл ActiveReports .js, выполнив в моем componentDidMount()

s.type = "text/javascript";
s.src = "../node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-designer/index.js";
this.externalWindow.document.head.append(s);

а затем назначение экземпляра конструктора для свойства onLoad элемента. Опять не повезло.

Может быть, я мог бы запустить код JavaScript после загрузки портала и указать на этот DOM?

Спасибо


person aibars    schedule 10.12.2020    source источник


Ответы (1)


Я работаю в ГрейпСити. Не могли бы вы перейти на наш портал поддержки и отправить заявку. Нам понадобится полный пример кода, чтобы мы могли ответить на этот вопрос. Пожалуйста, дайте нам ссылку для скачивания образца в билете.

Спасибо

person GrapeCity Team    schedule 18.12.2020