Блог

Я использую Sweet Alert 2 сhttps://github.com/sweetalert2/sweetalert2-react-content усилитель для создания некоторых модалов с функциональностью в моем приложении, но я обнаружил, что единственный способ передать данные в модал swal — это использовать props:

     MySwal.fire({
      html: <SaveDialog schema={schema} reload={refetch}/>
    });
  

В приложении я часто использую хук useContext, фактически, те реквизиты, которые я передаю в модал, уже представлены в контексте. При попытке использовать useContext в компоненте react, отображаемом в модальном, он не получит ни одного из значений в контексте, потому что модальный swal отображается вне дерева компонентов react, что делает поставщика контекста выше в дереве недоступным в модальном компоненте.

Я знаю, что можно обернуть компонент следующим образом:

 <SomeProvider><SaveDialog schema={schema} reload={refetch}/></SomeProvider>
  

И это сработало бы для вещей внутри самого модала, но это был бы просто еще один экземпляр provider, который никоим образом не связан с предыдущим экземпляром, поэтому также не имеет правильных значений.
Я также знаю, что невозможно отобразить модал swal как дочерний элемент существующего компонента в дереве (это связано с тем, что модал является другим ReactDOM.render). Есть какой-либо способ сделать поставщик контекста доступным для модального компонента?