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

Question

我正在构建的应用程序中使用 React-modal。它工作正常，但我收到此错误：

正如我在这个线程 https://github.com/reactjs/react-modal/issues/133 上发现的那样，它似乎正在发生，因为“react-modal 试图将 app 元素设置为 document.body，而它还不存在”

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

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

知道如何解决这个问题吗？

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

这是库和代码示例。我的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);

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>