[英]I am getting this error: “react-modal: App element is not defined”
I am using React-modal in an application I am building.我正在构建的应用程序中使用 React-modal。 It works fine, but I am getting this error:
它工作正常,但我收到此错误:
As I found out on this thread https://github.com/reactjs/react-modal/issues/133 it seems to be happening becase "react-modal was trying to set the app element to document.body, while it doesn't exist yet"正如我在这个线程https://github.com/reactjs/react-modal/issues/133上发现的那样,它似乎正在发生,因为“react-modal 试图将 app 元素设置为 document.body,而它却没有”还不存在"
I found a couple solutions on this question, but none of them solved my problem: "Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`"我在这个问题上找到了几个解决方案,但没有一个解决了我的问题: “警告:react-modal:App 元素未定义。请使用 `Modal.setAppElement(el)` 或设置 `appElement={el}`”
What I had to do was to set ariaHideApp={false}
, it works, but it's not a solution.我必须做的是设置
ariaHideApp={false}
,它有效,但它不是解决方案。
Any idea how I could solve this?知道我如何解决这个问题吗?
It's worth remembering that componentWillMount
are deprecated, besides that I am working with hooks.值得记住的是
componentWillMount
已被弃用,此外我正在使用钩子。
This is the library and a sample of the code.这是库和代码示例。 My modal is quite similar to it, the only difference is the content: https://www.npmjs.com/package/react-modal
我的modal和它很像,唯一的区别就是内容: https : //www.npmjs.com/package/react-modal
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')
function App(){
var subtitle;
const [modalIsOpen,setIsOpen] = React.useState(false);
function openModal() {
setIsOpen(true);
}
function afterOpenModal() {
// references are now sync'd and can be accessed.
subtitle.style.color = '#f00';
}
function closeModal(){
setIsOpen(false);
}
return (
<div>
<button onClick={openModal}>Open Modal</button>
<Modal
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
<button onClick={closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
<button>tab navigation</button>
<button>stays</button>
<button>inside</button>
<button>the modal</button>
</form>
</Modal>
</div>
);
}
ReactDOM.render(<App />, appElement);
add ariaHideApp={false}
to your Modal properties like this:将
ariaHideApp={false}
添加到您的 Modal 属性中,如下所示:
<Modal
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
ariaHideApp={false}>
<h1>My Modal</h1>
</Modal>
You have not set your app element
properly.您没有正确设置您的
app element
。
Change the following line:更改以下行:
Modal.setAppElement('#yourAppElement');
To:到:
Modal.setAppElement('#root');
Or to your actual app element
.或者到您的实际
app element
。
For more information check this documentation: http://reactcommunity.org/react-modal/accessibility/有关更多信息,请查看此文档: http : //reactcommunity.org/react-modal/accessibility/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.