"警告:react-modal:App 元素未定义.请使用`Modal.setAppElement(el)`或设置`appElement={el}`"; [英] "Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`"
问题描述
如何使用 react-modal 包在 React 应用程序的控制台中修复此警告:
How to fix this warning in console of a React app using the react-modal package:
警告:react-modal:App 元素未定义.请使用 Modal.setAppElement(el) 或设置 appElement={el}
Warning: react-modal: App element is not defined. Please use
Modal.setAppElement(el)or setappElement={el}
我没有成功弄清楚 el 应该是什么.
I have not been successful at figuring out what el is supposed to be.
上下文:在我的 App.js 根组件文件中:
Context: in my App.js root component file:
...
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.
一切正常，但打开 Modal 时，控制台中出现以下警告:
Everything works fine, but when the Modal is opened, the following Warning appears in my console:
index.js:2177 警告:react-modal:App 元素未定义.请使用 Modal.setAppElement(el) 或设置 appElement={el}.这是必需的，因此屏幕阅读器在打开模态时看不到主要内容.不建议这样做，但您可以通过设置 ariaHideApp={false} 选择退出.
index.js:2177 Warning: react-modal: App element is not defined. Please use
Modal.setAppElement(el)or setappElement={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 settingariaHideApp={false}.
在 react-modal 文档 中，我只能找到以下:
In the react-modal docs all I can find is the following:
应用元素app 元素允许您指定应隐藏的应用程序部分(通过 aria-hidden)，以防止屏幕阅读器等辅助技术读取模态内容之外的内容.
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.
如果你在做服务器端渲染，你应该使用这个属性.
If you are doing server-side rendering, you should use this property.
可以通过以下方式指定:
It can be specified in the following ways:
DOM元素Modal.setAppElement(appElement);查询选择器 - 使用传入类时找到的第一个元素.Modal.setAppElement('#your-app-element');
不幸的是，这没有帮助！我不知道 el 应该代表什么.
Unfortunately, this has not helped !
I cannot figure out what el is supposed to represent.
以下是我尝试添加到我的 Modal 组件中的许多属性变体中的一些:
Here are some of the many property variations I have tried adding to my Modal component:
`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'); 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 内部调用 Modal.setAppElement('root');，其中 root 是我的 App 组件被注入的根元素，而 index.js 就是我这样做的地方.
推荐答案
问题出在这里:取决于它何时评估 react-modal@1.6.5:/lib/helpers/ariaAppHider.js#L1:
- document.body does not exist yet and it will resolve to
undefined || null. - if
Modal.setAppElement()is called withnullor not called at all with the<script />placed on<head />(same as above). - Probably it can also happen if called with a
selectorthat does not match any results.
- document.body 尚不存在，它将解析为
undefined ||空. - 如果
Modal.setAppElement()使用null调用或根本不调用放在(同上). - 如果使用与任何结果都不匹配的
selector调用，也可能会发生这种情况.
@yachaka snippet prevents this behavior by defining the element before placing the <Modal />:
@yachaka snippet 通过定义元素来防止这种行为在放置
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>.
Though ideallyreact-modalshould wait until the DOM is loaded to try attaching todocument.body.
将捆绑的应用程序 JS 注入 而不是 .
尽管理想情况下 react-modal 应该等到 DOM 加载完毕再尝试附加到 document.body.
server-side:
服务器端:
<块引用>如果在服务器端渲染，你必须提供一个 document.body，然后才需要模态脚本(也许最好在这种情况下使用 setAppElement()案例).
If rendering on server-side, you must provide a
document.body, before requiring the modal script (perhaps it should be preferable to usesetAppElement()in this case).
<小时>
更新:react 文档 已更新以包含上述信息，因此它们对于遇到此问题的用户来说，现在应该更清楚了.
react-modal 问题 #567: 添加信息(来自上面链接的问题 #133)到文档.
Update:
react docs have been updated to include the information above, so they should now be clearer for users running into this issue.
react-modal issue #567: add information (from issue #133 linked above) to the docs.
这篇关于"警告:react-modal:App 元素未定义.请使用`Modal.setAppElement(el)`或设置`appElement={el}`";的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
