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

【问题标题】：Pass document while rendering a React component in outer window在外部窗口中渲染 React 组件时传递文档
【发布时间】：2021-01-16 06:07:30
【问题描述】：

我正在尝试处理弹出外部窗口中的 React 组件，我正在使用 FlexLayout、ag-Grid React 和 SyncFusion React，并且我设法通过使用 const currentDocument = this.selfRef.current.ownerDocument; 处理带有 FlexLayout 的外部窗口 -check @ 987654324@- 并将这个 currentDocument 传递给 ag-Grid 中的 getDocument() 回调，现在我想对 SyncFusion 做同样的事情，但我发现 SyncFusion 中没有方法/属性可以将 currentDocument 传递给它.

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

附上未将currentDocument（新外部窗口）传递给 SyncFusion 组件时出现问题的屏幕截图原始窗口（左侧）！

SyncFusion DatePicker Issue Screenshot

【问题讨论】：

标签： reactjs syncfusion react-dom ag-grid-react ej2-syncfusion

【解决方案1】：

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

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

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

另外，您可以在数字中设置 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

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

【讨论】：

感谢您的回复，但我认为您没有得到我的问题。我的问题不在于将组件定位在同一个文档（DOM）中，而在于在另一个文档（弹出窗口）中呈现组件，因为默认情况下 SyncFusion 呈现弹出外部窗口中的按钮这是我想要的，但是它将DatePicker的组件本身呈现在主窗口中，而不是在已单击按钮旁边的弹出外部窗口中，因此，单击事件发生在一个窗口中，但其结果发生在另一个窗口中!

【解决方案2】：

您可以使用 open 事件参数中的 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

【讨论】：