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

问题描述

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

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

我在这个问题上找到了几个解决方案，但没有一个解决了我的问题：“警告：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);

标签： javascriptreactjsreact-modal

你没有app element正确设置你的。

更改以下行：

Modal.setAppElement('#yourAppElement');

至：

Modal.setAppElement('#root');

或以您的实际app element.

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

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

问题描述

解决方案

推荐阅读