我收到此錯誤：“react-modal：App 元素未定義”

Question

我正在構建的應用程序中使用 React-modal。 它工作正常，但我收到此錯誤：

正如我在這個線程https://github.com/reactjs/react-modal/issues/133上發現的那樣，它似乎正在發生，因為“react-modal 試圖將 app 元素設置為 document.body，而它卻沒有”還不存在"

我在這個問題上找到了幾個解決方案，但沒有一個解決了我的問題： “警告：react-modal：App 元素未定義。請使用 `Modal.setAppElement(el)` 或設置 `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

將ariaHideApp={false}添加到您的 Modal 屬性中，如下所示：

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

Answer 2

您沒有正確設置您的app element 。

更改以下行：

Modal.setAppElement('#yourAppElement');

到：

Modal.setAppElement('#root');

或者到您的實際app element 。

有關更多信息，請查看此文檔： http : //reactcommunity.org/react-modal/accessibility/