Как исправить это предупреждение в консоли приложения React с помощью пакетаact-modal:
Предупреждение: реакции-модал: элемент приложения не определен. Пожалуйста, используйте
Modal.setAppElement(el)
или установитеappElement={el}
Мне не удалось понять, каким должен быть el
.
Контекст: в моем файле корневого компонента App.js:
...
import Modal from 'react-modal';
...
class App extends Component {
...
render(){
...
<Modal
className="modal"
overlayClassName="overlay"
isOpen={foodModalOpen}
onRequestClose={this.closeFoodModal}
contentLabel="Modal"
>
...
}
}
Где ...
означает, что код не показан.
Все работает нормально, но когда модал открыт, в моей консоли появляется следующее предупреждение:
index.js: 2177 Внимание: реакция-модальность: элемент приложения не определен. Пожалуйста, используйте
Modal.setAppElement(el)
или установитеappElement={el}
. Это необходимо, чтобы программы чтения с экрана не видели основной контент при открытии модального окна. Это не рекомендуется, но вы можете отказаться, установивariaHideApp={false}
.
В реагирующих модальных документах я могу найти только следующее:
Элемент приложения Элемент app позволяет вам указать часть вашего приложения, которая должна быть скрыта (через aria-hidden), чтобы вспомогательные технологии, такие как программы чтения с экрана, не могли читать контент за пределами содержимого вашего модального канала.
Если вы выполняете рендеринг на стороне сервера, вы должны использовать это свойство.
Это можно указать следующими способами:
DOMElement
Modal.setAppElement(appElement);
query selector - uses the first element found if you pass in a class.
Modal.setAppElement('#your-app-element');
К сожалению, это не помогло!
Я не могу понять, что el
должен представлять.
Вот несколько вариантов свойств, которые я пытался добавить в свой модальный компонент:
'appElement={el}',
'appElement="root"' where 'root' is the id that my App component is injected into
'appElement={'root'}'
'appElement="div"',
'appElement={<div>}',
'appElement={"div"}'
Я также пытался вызвать Modal.setAppElement('root');
изнутри src/index.js
, где root
является корневым элементом, в который вставлен мой компонент App
, а index.js - то, где я это делаю.