web-dev-qa-db-fra.com

"Avertissement: react-modal: l'élément App n'est pas défini. Veuillez utiliser` Modal.setAppElement (el) `ou définissez` appElement = {el} `"

Comment résoudre cet avertissement dans la console d'une application React à l'aide du package react-modal:

Avertissement: react-modal: l'élément App n'est pas défini. Veuillez utiliser Modal.setAppElement(el) ou définir appElement={el}

Je n'ai pas réussi à déterminer ce que el est censé être.

Contexte: dans mon fichier de composant racine App.js:

...
import Modal from 'react-modal';
...
class App extends Component {
  ...
  render(){
    ...  
    <Modal
      className="modal"
      overlayClassName="overlay"
      isOpen={foodModalOpen}
      onRequestClose={this.closeFoodModal}
      contentLabel="Modal"
    >
    ...
  }
}

Où ... indique le code non affiché.

Tout fonctionne bien, mais lorsque le Modal est ouvert, l'avertissement suivant apparaît dans ma console:

index.js: 2177 Avertissement: réagit-modal: l'élément App n'est pas défini. Veuillez utiliser Modal.setAppElement(el) ou définir appElement={el}. Cela est nécessaire pour que les lecteurs d'écran ne voient pas le contenu principal lorsque modal est ouvert. Ce n'est pas recommandé, mais vous pouvez vous désabonner en définissant ariaHideApp={false}.

Dans la documentation de react-modal , tout ce que je peux trouver est la suivante:

Élément d'application L'élément d'application vous permet de spécifier la partie de votre application à masquer (via aria-hidden) pour empêcher les technologies d'assistance telles que les lecteurs d'écran de lire du contenu en dehors du contenu de votre modal.

Si vous effectuez un rendu côté serveur, vous devez utiliser cette propriété.

Il peut être spécifié des manières suivantes:

DOMElement
Modal.setAppElement(appElement);
query selector - uses the first element found if you pass in a class.
Modal.setAppElement('#your-app-element');

Malheureusement, cela n'a pas aidé! Je ne peux pas comprendre ce que el est censé représenter.

Voici quelques-unes des nombreuses variations de propriétés que j'ai essayé d'ajouter à mon composant Modal:

`appElement={el}`,  
`appElement="root"` where `root` is the id that my App component is injected into   
`appElement={'root'}`   
`appElement="div"`,   
`appElement={<div>}`,   
`appElement={"div"}`

J'ai également essayé d'appeler Modal.setAppElement('root'); à l'intérieur de src/index.js, où root est l'élément racine dans lequel mon composant App est injecté et index.js est l'endroit où je le fais.

javascriptreactjsreact-modalweb-accessibility
7
SherylHohman

Quelques solutions sont données dans le numéro de réaction-modal n ° 133:

Le problème réside ici: En fonction du moment où il évalue [email protected]: /lib/helpers/ariaAppHider.js#L1:

  • document.body n'existe pas encore et il résoudra en undefined || null. 
  • si Modal.setAppElement() est appelé avec null ou pas appelé du tout avec le <script /> placé sur <head /> (comme ci-dessus). 
  • Cela peut probablement aussi arriver si vous appelez avec une selector qui ne correspond à aucun résultat.

Solutions:

Rendu du navigateur:

@yachaka snippet empêche ce problème en définissant l'élément avant de placer le <Modal />: 

componentWillMount() {
    Modal.setAppElement('body');
}

@ungoldman answer , si vous ne voulez pas dépendre de `setAppElement ': 

Injectez l'application JS fournie dans <body> au lieu de <head>.
Idéalement, react-modal devrait attendre que le DOM soit chargé pour essayer de s’attacher à document.body.

du côté serveur:

Si vous effectuez un rendu côté serveur, vous devez fournir un document.body avant d'exiger le script modal (il serait peut-être préférable d'utiliser setAppElement() dans ce cas).

Update: react docs a été mis à jour pour inclure les informations ci-dessus, elles devraient donc être plus claires pour les utilisateurs qui rencontrent ce problème.
numéro de réaction-modal # 567: ajouter des informations (à partir du numéro de lien 133 ci-dessus) aux documents.

10
SherylHohman

Ajoutez ariaHideApp={false} aux attributs Modal. 

Cela devrait fonctionner: 

<Modal isOpen={!!props.selectedOption}
    onRequestClose={props.clearSelectedOption}
    ariaHideApp={false}
    contentLabel="Selected Option"
    >
</Modal>
4
amrit chhetri

Incluez simplement appElement={document.getElementById('app')} dans votre modal comme ceci 

<Modal
className="modal"
appElement={document.getElementById('app')}
>

Cela fonctionnera à 100% si l'application est votre centre dans index.html d'où réagit les charges.

2
Aditya Mishra

Pour référence, comme ce fut un problème pour moi, si vous effectuez une SSR, utilisez le code suivant pour éviter les erreurs côté serveur:

if (typeof(window) !== 'undefined') {
    ReactModal.setAppElement('body')
}

Vous pouvez mettre ceci dans componentDidMount() partout où vous utilisez un modal ou je le mets dans un composant modal personnalisé pour qu'il soit beau et sec.

2
Nathaniel Hill

Ceci est mon TypeScript Modal composant qui enveloppe react-modal v3.8.1:

import React from 'react'
import ReactModal from 'react-modal'

interface Props {
  isOpen: boolean
  ariaLabel?: string
}

const Modal: React.FC<Props> = ({
  children,
  ariaLabel = 'Alert Modal',
  isOpen,
}) => (
  <ReactModal
    appElement={document.getElementById('root') as HTMLElement}
    ariaHideApp={process.env.NODE_ENV !== 'test'}
    isOpen={isOpen}
    contentLabel={ariaLabel}
    testId="modal-content"
  >
    {children}
  </ReactModal>
)

export default Modal

Utilisation dans le composant avec state = { isOpen: true }:

<Modal isOpen={this.state.isOpen}>
  <p>
    Modal Content here…
  </p>
  <button onClick={() => { this.setState({ isOpen: false }) }}>Okay</button>
</Modal>
0
Beau Smith

vous devez ajouter # avant votre identifiant d'élément racine. 

import React from 'react';
import Modal from 'react-modal';


Modal.setAppElement('#root');

const OptionModal = (props) => (
  <Modal
    isOpen={!!props.selectedOption}
    contentLabel='this is the selected option'
  >
    <h3>Selected Option</h3>
    {props.selectedOption && <p>{props.selectedOption}</p>}
    <button onClick = {props.handleCloseOptionModal}>Close</button>
  </Modal>
);

export default OptionModal;

voici la référence: http://reactcommunity.org/react-modal/accessibility/

0
Mo Hemati