Передать документ при рендеринге компонента React во внешнем окне

Question

Я пытаюсь обрабатывать компоненты React во всплывающих внешних окнах, я использую FlexLayout, ag-Grid React и SyncFusion React, и мне удалось обработать внешнее окно с помощью FlexLayout, используя const currentDocument = this.selfRef.current.ownerDocument; -проверьте плавающие вкладки (всплывающие окна) в FlexLayout - и передайте это currentDocument к getDocument() обратный вызов в ag-Grid, и теперь я хотел сделать то же самое с SyncFusion, но я не нашел в SyncFusion метода / свойства для передачи currentDocument к нему.

Итак, есть ли способ передать документ внешнего окна компоненту SyncFusion, который будет повторно визуализирован после перехода во внешнее окно и выхода из исходного документа?

Прикрепил скриншот проблемы, когда не передаешь currentDocument(новое внешнее окно) для компонентов SyncFusion. Я нажал кнопку выбора даты во внешнем окне (справа), но компонент DatePicker отобразился в исходном окне (слева)!

Снимок экрана проблемы SyncFusion DatePicker

Answer 1

Вы можете выровнять положение всплывающего окна относительно элемента ввода, установив положение X и Y в событии open всплывающего окна DateTimePicker, как указано в приведенном ниже примере кода.

    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

Предоставьте более подробную информацию о своем запросе, если предложенное выше решение вам не помогает.

Answer 2

Вы можете настроить всплывающее окно DatePicker в желаемой позиции, используя метод appendTo в аргументе открытого события. Пожалуйста, обратитесь к приведенному ниже коду,

    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