0

我正在尝试创建一个 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);
    }

但是，当新窗口加载时，我收到错误

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

这表明该designer-hostdiv 不存在。我认为加载函数指向主 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 代码？

谢谢

4

1 回答 1

0

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

谢谢

于 2020-12-18T20:40:32.660 回答