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

Question

How to fix this warning in console of a React app using the react-modal package:如何使用 react-modal 包在 React 应用程序的控制台中修复此警告：

Warning: react-modal: App element is not defined.警告：react-modal：未定义 App 元素。 Please use Modal.setAppElement(el) or set appElement={el}请使用Modal.setAppElement(el)或设置appElement={el}

I have not been successful at figuring out what el is supposed to be.我还没有成功弄清楚el应该是什么。

Context: in my App.js root component file:上下文：在我的 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 ... indicates code not shown.其中...表示未显示代码。

Everything works fine, but when the Modal is opened, the following Warning appears in my console:一切正常，但是当 Modal 打开时，我的控制台中会出现以下警告：

index.js:2177 Warning: react-modal: App element is not defined. index.js:2177 警告：react-modal：未定义 App 元素。 Please use Modal.setAppElement(el) or set appElement={el} .请使用Modal.setAppElement(el)或设置appElement={el} 。 This is needed so screen readers don't see main content when modal is opened.这是必需的，以便屏幕阅读器在打开模式时看不到主要内容。 It is not recommended, but you can opt-out by setting ariaHideApp={false} .不建议这样做，但您可以通过设置ariaHideApp={false}来选择退出。

In the react-modal docs all I can find is the following:在react-modal 文档中，我只能找到以下内容：

App Element The app element allows you to specify the portion of your app that should be hidden (via aria-hidden) to prevent assistive technologies such as screenreaders from reading content outside of the content of your modal. App 元素 app 元素允许您指定应用程序中应隐藏的部分（通过 aria-hidden），以防止屏幕阅读器等辅助技术读取模态内容之外的内容。

If you are doing server-side rendering, you should use this property.如果你在做服务器端渲染，你应该使用这个属性。

It can be specified in the following ways:可以通过以下方式指定：

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

Unfortunately, this has not helped !不幸的是，这没有帮助！ I cannot figure out what el is supposed to represent.我无法弄清楚el应该代表什么。

Here are some of the many property variations I have tried adding to my Modal component:以下是我尝试添加到我的 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"}`

I've also tried calling Modal.setAppElement('root');我也试过调用Modal.setAppElement('root'); from inside src/index.js , where root is the root element that my App component is injected into, and index.js is where I do that.从内部src/index.js ，其中root是我的App组件注入的根元素，而 index.js 是我这样做的地方。

Answer 1

Add ariaHideApp={false} to Modal attributes.将ariaHideApp={false}添加到Modal属性。

This should work:这应该有效：

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

Answer 2

Some solutions are given in react-modal issue #133: react-modal issue #133 中给出了一些解决方案：

The problem lies here: Depending on when it evaluates react-modal@1.6.5:/lib/helpers/ariaAppHider.js#L1: 问题出在这里：取决于它何时评估 react-modal@1.6.5:/lib/helpers/ariaAppHider.js#L1：

document.body does not exist yet and it will resolve to undefined || null document.body 还不存在，它将解析为undefined || null undefined || null . undefined || null 。
if Modal.setAppElement() is called with null or not called at all with the <script /> placed on <head /> (same as above).如果Modal.setAppElement()以null调用或根本不调用<script />放在<head />上（与上面相同）。
Probably it can also happen if called with a selector that does not match any results.如果使用与任何结果都不匹配的selector调用，可能也会发生这种情况。

Solutions:解决方案：

Browser Rendering:浏览器渲染：

@yachaka snippet prevents this behavior by defining the element before placing the <Modal /> : @yachaka 片段通过在放置<Modal />之前定义元素来防止这种行为：

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

@ungoldman answer , if you don't want to depend on `setAppElement': @ungoldman 回答，如果您不想依赖 `setAppElement'：

Inject the bundled application JS into <body> instead of <head> .将捆绑的应用程序 JS 注入<body>而不是<head> 。
Though ideally react-modal should wait until the DOM is loaded to try attaching to document.body .虽然理想情况下react-modal应该等到 DOM 加载后尝试附加到document.body 。

server-side:服务器端：

If rendering on server-side, you must provide a document.body , before requiring the modal script (perhaps it should be preferable to use setAppElement() in this case).如果在服务器端呈现，则必须在需要模态脚本之前提供document.body （在这种情况下，可能最好使用setAppElement() ）。

Update : react docs have been updated to include the information above, so they should now be clearer for users running into this issue.更新： react 文档已更新以包含上述信息，因此对于遇到此问题的用户来说，它们现在应该更清楚了。
react-modal issue #567: add information (from issue #133 linked above) to the docs. react-modal 问题 #567：将信息（来自上面链接的问题 #133）添加到文档中。

Answer 3

Just include appElement={document.getElementById('app')} inside your modal like this只需将appElement={document.getElementById('app')}包含在您的模态中，如下所示

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

It will work 100% if app is your central in index.html from where react loads.如果应用程序是您在 index.html 中加载反应的中心，它将 100% 工作。

Answer 4

This is my TypeScript Modal component which wraps react-modal v3.8.1:这是我的 TypeScript Modal组件，它包装了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

Usage in component with state = { isOpen: true } :在state = { isOpen: true }的组件中的用法：

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

Answer 5

If getting the Warning: react-modal: App element is not defined... error when running tests (we were running Jest), you can suppress the warnings by adding the following to your test file:如果收到Warning: react-modal: App element is not defined...运行测试时出错（我们正在运行 Jest），您可以通过将以下内容添加到测试文件来抑制警告：

import ReactModal from 'react-modal';
ReactModal.setAppElement('*'); // suppresses modal-related test warnings.

Answer 6

The shortest solution is to add最短的解决方案是添加
appElement={document.getElementById("hereIsYourRootElementId")}

It lets react-modal know where is your root element.它让 react-modal 知道你的根元素在哪里。

Answer 7

For reference, since it was a pain for me, if you are doing SSR, use the following code to prevent errors server-side:作为参考，因为这对我来说很痛苦，如果您正在执行 SSR，请使用以下代码来防止服务器端错误：

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

You could put this in componentDidMount() anywhere you use a modal or I put it in a custom modal component so it's nice and DRY.您可以将其放在使用模态的任何地方的componentDidMount()中，或者我将其放在自定义模态组件中，这样它既好又干。

Answer 8

Just put this就放这个
Modal.setAppElement('#root')

This will solve the warning.这将解决警告。 The root element coming from inside public folder index.html.来自公用文件夹 index.html 内部的根元素。

Answer 9

you need to add # before your root element id.您需要在根元素 ID 之前添加 # 。

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;

here is the reference: http://reactcommunity.org/react-modal/accessibility/这是参考： http ://reactcommunity.org/react-modal/accessibility/

Answer 10

If you get that warning on testing with the "react-testing-library" here is a solution: https://github.com/reactjs/react-modal/issues/576#issuecomment-524644035如果您在使用“react-testing-library”进行测试时收到警告，这是一个解决方案： https ://github.com/reactjs/react-modal/issues/576#issuecomment-524644035

using the react-testing-library ( https://testing-library.com/ ) I get rid of that warning with:使用 react-testing-library ( https://testing-library.com/ ) 我摆脱了这个警告：

import Modal from "react-modal";

const { container } = render(<MyComponent />);
Modal.setAppElement(container);

....  // to the testing, use Modal

or, if you want to test the modal component directly:或者，如果您想直接测试模态组件：

const { container, rerender } render(<MyModalComponent isOpen={false} />);
Modal.setAppElement(container);
// now the appElement is set we can show the modal component
rerender(<MyModalComponent isOpen={false} />);

....  // to the testing

Answer 11

对于 Nextjs，我认为您可以通过在声明组件之前将以下内容添加到模态组件外部（可能位于顶部）来解决此问题。

Modal.setAppElement('#__next')

Answer 12

How to fix this warning in console of a React app using the react-modal package:如何使用react-modal包在React应用程序的控制台中解决此警告：

Warning: react-modal: App element is not defined.警告：react-modal：未定义App元素。 Please use Modal.setAppElement(el) or set appElement={el}请使用Modal.setAppElement(el)或将appElement={el}

I have not been successful at figuring out what el is supposed to be.我并没有成功弄清楚el应该是什么。

Context: in my App.js root component file:上下文：在我的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 ... indicates code not shown.其中...表示未显示的代码。

Everything works fine, but when the Modal is opened, the following Warning appears in my console:一切正常，但是打开Modal时，控制台中会显示以下警告：

index.js:2177 Warning: react-modal: App element is not defined. index.js：2177警告：react-modal：未定义App元素。 Please use Modal.setAppElement(el) or set appElement={el} .请使用Modal.setAppElement(el)或设置appElement={el} 。 This is needed so screen readers don't see main content when modal is opened.这是必需的，因此打开模式对话框时，屏幕阅读器不会看到主要内容。 It is not recommended, but you can opt-out by setting ariaHideApp={false} .不建议这样做，但是可以通过设置ariaHideApp={false}来退出。

In the react-modal docs all I can find is the following:在react-modal文档中，我只能找到以下内容：

App Element The app element allows you to specify the portion of your app that should be hidden (via aria-hidden) to prevent assistive technologies such as screenreaders from reading content outside of the content of your modal. App元素app元素允许您指定应隐藏（通过aria隐藏）应用程序的一部分，以防止诸如屏幕阅读器之类的辅助技术读取模态内容之外的内容。

If you are doing server-side rendering, you should use this property.如果要进行服务器端渲染，则应使用此属性。

It can be specified in the following ways:可以通过以下方式指定它：

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

Unfortunately, this has not helped !不幸的是，这没有帮助！ I cannot figure out what el is supposed to represent.我不知道el应该代表什么。

Here are some of the many property variations I have tried adding to my Modal component:以下是我尝试添加到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"}`

I've also tried calling Modal.setAppElement('root');我也尝试过调用Modal.setAppElement('root'); from inside src/index.js , where root is the root element that my App component is injected into, and index.js is where I do that.从src/index.js内部开始，其中root是将我的App组件注入其中的根元素，而index.js是我执行此操作的地方。

Answer 13

删除此属性 className="modal" 并再次运行

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

问题描述

12 个解决方案

解决方案1
40 2018-05-31 13:05:23

解决方案2
27 已采纳 2018-01-15 20:38:13

Solutions:解决方案：

Browser Rendering:浏览器渲染：

server-side:服务器端：

解决方案3
14 2018-09-02 00:41:00

解决方案4
9 2019-02-13 21:47:47

解决方案5
4 2019-03-25 13:18:20

解决方案6
4 2019-11-04 10:46:15

解决方案7
3 2018-04-22 19:42:39

解决方案8
3 2020-10-31 06:14:00

解决方案9
1 2018-10-02 14:44:44

解决方案10
1 2019-08-25 16:49:06

解决方案11
0 2022-06-24 15:21:53

解决方案12
-1 2021-02-01 09:50:33

解决方案13
-3 2020-11-13 07:33:15

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

问题描述

12 个解决方案

解决方案1 40 2018-05-31 13:05:23

解决方案2 27 已采纳 2018-01-15 20:38:13

Solutions:解决方案：

Browser Rendering:浏览器渲染：

server-side:服务器端：

解决方案3 14 2018-09-02 00:41:00

解决方案4 9 2019-02-13 21:47:47

解决方案5 4 2019-03-25 13:18:20

解决方案6 4 2019-11-04 10:46:15

解决方案7 3 2018-04-22 19:42:39

解决方案8 3 2020-10-31 06:14:00

解决方案9 1 2018-10-02 14:44:44

解决方案10 1 2019-08-25 16:49:06

解决方案11 0 2022-06-24 15:21:53

解决方案12 -1 2021-02-01 09:50:33

解决方案13 -3 2020-11-13 07:33:15

解决方案1
40 2018-05-31 13:05:23

解决方案2
27 已采纳 2018-01-15 20:38:13

解决方案3
14 2018-09-02 00:41:00

解决方案4
9 2019-02-13 21:47:47

解决方案5
4 2019-03-25 13:18:20

解决方案6
4 2019-11-04 10:46:15

解决方案7
3 2018-04-22 19:42:39

解决方案8
3 2020-10-31 06:14:00

解决方案9
1 2018-10-02 14:44:44

解决方案10
1 2019-08-25 16:49:06

解决方案11
0 2022-06-24 15:21:53

解决方案12
-1 2021-02-01 09:50:33

解决方案13
-3 2020-11-13 07:33:15