“警告: react-modal:未定义应用程序元素。请使用`Modal.setAppElement(el)`或设置`appElement={el}`“
如何使用react-modal包在React应用程序的控制台中修复此警告：
警告: react-modal:未定义应用程序元素。请使用
或设置
我还没弄清楚
应该是这样的。
上下文:在我的App.js根组件文件中：
...
import Modal from 'react-modal';
...
class App extends Component {
...
render(){
...
...
}
}在哪里
表示未显示的代码。
一切正常，但当Modal打开时，以下警告出现在我的控制台中：
index.js:2177警告: react-modal:未定义应用程序元素。请使用
或设置
..。这是必需的，这样当modal打开时，屏幕阅读器就看不到主要内容了。不建议这样做，但您可以通过设置
..。
在
react模式文档
我能找到的只有以下内容：
App元素app元素允许您指定应用程序中应该隐藏的部分(通过aria- hidden )，以防止屏幕阅读器等辅助技术读取您的模式内容之外的内容。
如果您正在进行服务器端呈现，则应使用此属性。
可以通过以下方式指定：
DOMElement
不幸的是，这并没有帮助！我搞不懂是什么
应该代表着。
以下是我尝试添加到我的Modal组件中的许多属性变体中的一些：
`appElement={el}`,
`appElement="root"` where `root` is the id that my App component is injected into
`appElement={'root'}`
`appElement="div"`,
`appElement={}`,
`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.回答 11
Stack Overflow用户
发布于 2018-01-16 04:38:14
中给出了一些解决方案
反应模式问题#133：
问题出在这里：
取决于它何时评估react-modal@1.6.5:/lib/helpers/ariaAppHider.js#L1：
document.body尚不存在，它将解析为
..。
如果
调用
方法调用，或者根本不调用
</code> placed on <code><head /></code> (same as above). </li> <li>Probably it can also happen if called with a <code>selector</code> that does not match any results.</li> </ul> <h3>Solutions:</h3> <h3>Browser Rendering:</h3> <p><a href="https://github.com/reactjs/react-modal/issues/133#issuecomment-194034344" rel="noreferrer">@yachaka snippet</a> prevents this behavior by defining the element before placing the <code><Modal /></code>: </p> <pre><code>componentWillMount() { Modal.setAppElement('body'); } </code></pre> <p><a href="https://github.com/reactjs/react-modal/issues/133#issuecomment-207035185" rel="noreferrer">@ungoldman answer</a>, if you don't want to depend on `setAppElement': </p> <blockquote> <p>Inject the bundled application JS into <code><body></code> instead of <code><head></code>.<br> Though ideally <code>react-modal</code> should wait until the DOM is loaded to try attaching to <code>document.body</code>.</p> </blockquote> <h3>server-side:</h3> <blockquote> <p>If rendering on server-side, you must provide a <code>document.body</code>, before requiring the modal script (perhaps it should be preferable to use <code>setAppElement()</code> in this case).</p> </blockquote> <hr> <p><strong>Update</strong>: <a href="https://github.com/reactjs/react-modal/tree/master/docs/accessibility" rel="noreferrer">react docs</a> have been updated to include the information above, so they should now be clearer for users running into this issue.<br> <a href="https://github.com/reactjs/react-modal/issues/576" rel="noreferrer">react-modal issue #567:</a> add information (from issue #133 linked above) to the docs.</p>
Stack Overflow用户
发布于 2018-05-31 21:05:24
添加
至
属性。
这应该是可行的：
Stack Overflow用户
发布于 2018-09-02 08:41:00
只需包含
在您的模式中，如下所示
如果应用程序是你在index.html中加载react的中心，它将100%工作。
https://stackoverflow.com/questions/48269381
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号