发表新帖
发表新帖

“Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`”

后端 未结
关注
12 1197
轻奢々
轻奢々 2021-02-07 03:36

How to fix this warning in console of a React app using the react-modal package:

Warning: react-modal: App element is not defined. Please use Moda

相关标签:
12条回答
  • 半阙折子戏
    2021-02-07 04:11

    Some solutions are given in react-modal issue #133:

    The problem lies here: Depending on when it evaluates react-modal@1.6.5:/lib/helpers/ariaAppHider.js#L1:

    • document.body does not exist yet and it will resolve to undefined || null.
    • if Modal.setAppElement() is called with null or not called at all with the <script /> placed on <head /> (same as above).
    • Probably it can also happen if called with a selector that does not match any results.

    Solutions:

    Browser Rendering:

    @yachaka snippet prevents this behavior by defining the element before placing the <Modal />: 

    componentWillMount() {
    Modal.setAppElement('body');
}

    @ungoldman answer, if you don't want to depend on `setAppElement':

    Inject the bundled application JS into <body> instead of <head>.
    Though ideally react-modal should wait until the DOM is loaded to try attaching to document.body.

    server-side:

    If rendering on server-side, you must provide a document.body, before requiring the modal script (perhaps it should be preferable to use setAppElement() in this case).

    Update: react docs have been updated to include the information above, so they should now be clearer for users running into this issue.
    react-modal issue #567: add information (from issue #133 linked above) to the docs.

    0 讨论(0)
  • 星月不相逢
    2021-02-07 04:11

    you need to add # before your root element id. 

    import React from 'react';
import Modal from 'react-modal';


Modal.setAppElement('#root');

const OptionModal = (props) => (
  <Modal
    isOpen={!!props.selectedOption}
    contentLabel='this is the selected option'
  >
    <h3>Selected Option</h3>
    {props.selectedOption && <p>{props.selectedOption}</p>}
    <button onClick = {props.handleCloseOptionModal}>Close</button>
  </Modal>
);

export default OptionModal;

    here is the reference: http://reactcommunity.org/react-modal/accessibility/

    0 讨论(0)
  • 独厮守ぢ
    2021-02-07 04:13

    we can use ariaHideApp={false} additional property.

    <Modal isOpen={true} ariaHideApp={false}> 
//code
</Modal>

    this solution worked for me.

    0 讨论(0)
  • 抹茶落季
    2021-02-07 04:15

    For reference, since it was a pain for me, if you are doing SSR, use the following code to prevent errors server-side:

    if (typeof(window) !== 'undefined') {
    ReactModal.setAppElement('body')
}

    You could put this in componentDidMount() anywhere you use a modal or I put it in a custom modal component so it's nice and DRY.

    0 讨论(0)
  • 你的背包
    2021-02-07 04:18

    Add ariaHideApp={false} to Modal attributes.

    This should work: 

    <Modal isOpen={!!props.selectedOption}
    onRequestClose={props.clearSelectedOption}
    ariaHideApp={false}
    contentLabel="Selected Option"
    >
</Modal>
    0 讨论(0)
  • 無奈伤痛
    2021-02-07 04:19

    If getting the Warning: react-modal: App element is not defined... error when running tests (we were running Jest), you can suppress the warnings by adding the following to your test file:

    import ReactModal from 'react-modal';
ReactModal.setAppElement('*'); // suppresses modal-related test warnings.
    0 讨论(0)
 看不清?
提交回复
热议问题