Я пытаюсь создать портал 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?
Спасибо