Блог

Главная - Вопросы по программированию - Ошибка возникает, когда модальный react окружен порталом

Ошибка возникает, когда модальный react окружен порталом

#reactjs #typescript

Вопрос:

Я использую react. Я создал компонент портала. Когда я включаю модал в портал, я получаю следующую ошибку в VSCode. Если кто-нибудь знает, как это исправить, пожалуйста, дайте мне знать.

Описание ошибки

 Type '{ children: Element[]; }' is not assignable to type 'IntrinsicAttributes amp; ReactNode'.
  Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes'.ts(2322)
 
 // portal.tsx
import ReactDOM from 'react-dom';
import React from 'react';

export const Portal = (children: React.ReactNode) => {
  const el = document.getElementById('portal');
  return ReactDOM.createPortal(children, el);
};
 
   <Portal>
      <Overlay/>
      <Modal
        padding={padding}
        width={width}
        height={height}
        radius={radius}
        overflowY={overflowY}
      >
        {children}
      </Modal>
    </Portal>

Ответ №1:

createPortal получите один узел React, поэтому вам нужно будет обернуть его внутри другого <></> (React.Фрагмент):

Это createPortal тип:

 export function createPortal(
  children: ReactNode,
  container: Element,
  key?: null | string
): ReactPortal;

Поэтому вам нужно будет изменить свой код на:

 <Portal>
  <>
    <Overlay />
    <Modal
      padding={padding}
      width={width}
      height={height}
      radius={radius}
      overflowY={overflowY}
    >
      {children}
    </Modal>
  </>
</Portal>;

И в вашем portal.tsx 

 export const Portal: React.FunctionComponent<React.ReactNode> = ({
  children
}) => {
  const el = document.getElementById("portal");
  if (el) return ReactDOM.createPortal(children, el);
  return null;
};

Рабочий Пример:

Редактировать взволнованный-микросервис-8zsew

Комментарии:

1. Я добавил функцию экспорта createPortal в Portal.tsx, но произошла ошибка. Содержание ошибки Реализация функции отсутствует или не сразу после объявления.ts(23) Не удается найти имя 'ReactPortal'.ts(2304)

2. Нет, нет, createPortal это только тип, который я поместил туда для уточнения, вам не нужно копировать его в свой код.

3. Просто заверните своих детей в <><></> внутри вашего <Portal>

4. Я вложил его в <><></>, но ошибка не исчезла.

5. Могу ли я получить доступ к вашему решению?

Метки: ,