React Portals - 执行引用新窗口 DOM 的 function

Question

我正在尝试创建一个 React Portal，它在安装时需要运行特定的行来加载 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);
    }

但是，当新的 window 加载时，我收到错误

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

这表明designer-host div 不存在。 我认为负载 function 指向主 DOM 而不是新窗口的。

或者，我尝试通过在我的 componentDidMount() 中附加 ActiveReports.js 文件

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 属性上分配 Designer 实例化。 再次没有运气。

有没有办法在门户加载并指向该 DOM 后运行 JavaScript 代码？

谢谢

Answer 1

我为葡萄城工作。 您能否请 go 到我们的支持门户并提交票证。 我们需要一个完整的代码示例才能回答这个问题。 请向我们提供票证中示例的下载链接。

谢谢