“警告：react-modal：应用程序元素未定义。请使用`Modal.setAppElement(el)`或设置`appElement={el}`”

如何使用react-modal包在React应用程序的控制台中修复此警​​告：

警告：react-modal：应用程序元素未定义。请用Modal.setAppElement(el) or set 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"
    >
    ...
  }
}

Where ...表示未显示代码。

一切正常，但是当打开模态时，我的控制台中出现以下警告：

index.js:2177 警告：react-modal：应用程序元素未定义。请用Modal.setAppElement(el) or set appElement={el}。这是必需的，以便屏幕阅读器在打开模式时看不到主要内容。不建议这样做，但您可以通过设置选择退出ariaHideApp={false}.

In the 反应模式文档 https://www.npmjs.com/package/react-modal#app-element我能找到的只有以下内容：

应用程序元素 app 元素允许您指定应用程序中应隐藏的部分（通过 aria-hidden），以防止屏幕阅读器等辅助技术读取模态内容之外的内容。

如果您正在进行服务器端渲染，则应该使用此属性。

可以通过以下方式指定：

DOM元素
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, where root是我的根元素App组件被注入，index.js 就是我这样做的地方。

Add ariaHideApp={false} to Modal属性。

这应该有效：

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