在外部窗口中渲染React组件时传递文档

问题描述

我正在尝试在弹出的外部窗口中处理React组件，我正在使用FlexLayout，ag-Grid React和SyncFusion React，并且通过使用{{1 }} -检查Floating Tabs (Popouts) in FlexLayout-并将此const currentDocument = this.selfRef.current.ownerDocument;传递给ag-Grid中的currentDocument回调，现在我想对SyncFusion进行相同操作，但是我发现SyncFusion中没有方法将getDocument()传递给它。

那么，是否有将外部窗口文档传递给SyncFusion组件的功能，该组件将在进入外部窗口并离开原始文档后重新渲染？

未将currentDocument（新的外部窗口）传递给SyncFusion组件时，为该问题附加了屏幕截图我按下了外部窗口（右侧）中的Date Picker按钮，但按下了DatePicker组件在原始窗口（左侧）中呈现！

SyncFusion DatePicker Issue Screenshot

解决方法

如下面的代码示例中所述，可以通过在DateTimePicker弹出窗口的打开事件中设置X和Y位置来对齐与输入元素相关的弹出位置。

    this.onOpen = (args) => {
      args.popup.position = { X: "left",Y: "bottom" };
    };

弹出位置的可能值为左，右，上和下。尝试指定所有可能的值组合，以根据视口对齐弹出窗口。

此外，您可以设置numberX的offsetX和offsetY值（通过对x和y轴进行成像来提供x和y值），以使DateTimePicker弹出窗口与输入元素相关联。在这里，我们根据桌面模式提供了offsetX和offsetY值。您可以根据查看端口自定义它。

   this.onOpen = (args) => {
    args.popup.offsetX= 1000;
     args.popup.offsetY= 1000;
   };

示例链接：https://stackblitz.com/edit/react-yhgq4y-w2avy2?file=index.js

如果上述建议的解决方案不能帮助您，请提供有关查询的更多详细信息。

您可以使用open event自变量中的appendTo方法在所需位置自定义DatePicker弹出窗口。请参考下面的代码，

    render() {
        return (
          <div className="control-pane">
            <div className="control-section">
              <div className="datepicker-control-section">
                <DatePickerComponent open={this.onOpen.bind(this)} />
              </div>
            </div>
            <div id="target" />
          </div>
        );
      }
     onOpen(args) {
        args.appendTo = document.body.querySelector("#target");
      }

请在下面找到示例，

示例链接：https://stackblitz.com/edit/react-eekdsn?file=index.js

ag-grid-react ej2-syncfusion react-dom reactjs reactjs reactjs reactjs syncfusion