我收到这个错误：“react-modal: App element is not defined”

Question

我正在构建的一个应用程序中使用了React-modal。它工作得很好，但是我得到了这个错误：

​

​

正如我在这个帖子https://github.com/reactjs/react-modal/issues/133上发现的那样，这似乎是因为"react-modal试图将应用程序元素设置为document.body，而它还不存在“。

我在这个问题上找到了几个解决方案，但都没有解决我的问题："Warning: react-modal: App element is not defined. Please use Modal.setAppElement(el) or set appElement={el}"

我要做的是设置ariaHideApp={false}，它可以工作，但它不是一个解决方案。

你知道我该怎么解决这个问题吗？

值得记住的是，除了我正在使用钩子之外，componentWillMount已经被弃用了。

这是库和代码示例。我的模式与它非常相似，唯一的区别是内容：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);

Answer 1

您尚未正确设置app element。

更改以下行：

Modal.setAppElement('#yourAppElement');

至：

Modal.setAppElement('#root');

或者发送到您的实际app element。

有关更多信息，请查看此文档：http://reactcommunity.org/react-modal/accessibility/

Answer 2

将ariaHideApp={false}添加到您的模态属性，如下所示：

         <Modal
            isOpen={modalIsOpen}
            onAfterOpen={afterOpenModal}
            onRequestClose={closeModal}
            style={customStyles}
            contentLabel="Example Modal"
            ariaHideApp={false}>
            <h1>My Modal</h1>
        </Modal>