web-dev-qa-db-ja.com

「警告：react-modal：App要素が定義されていません。`Modal.setAppElement（el） `を使用するか、` appElement = {el} `を設定してください。」

React-modalパッケージを使用したReactアプリのコンソールでこの警告を修正する方法：

警告：反応モード：アプリ要素が定義されていません。 Modal.setAppElement(el)を使用するか、_appElement={el}_を設定してください

elがどうあるべきかを理解することに成功していません。

コンテキスト：App.jsルートコンポーネントファイル内：

_...
import Modal from 'react-modal';
...
class App extends Component {
  ...
  render(){
    ...  
    <Modal
      className="modal"
      overlayClassName="overlay"
      isOpen={foodModalOpen}
      onRequestClose={this.closeFoodModal}
      contentLabel="Modal"
    >
    ...
  }
}
_

_..._は表示されていないコードを示します。

すべて正常に動作しますが、モーダルを開くと、コンソールに次の警告が表示されます。

index.js：2177警告：反応モード：アプリ要素が定義されていません。 Modal.setAppElement(el)を使用するか、_appElement={el}_を設定してください。これは、モーダルが開かれたときにスクリーンリーダーがメインコンテンツを表示しないようにするために必要です。推奨されませんが、_ariaHideApp={false}_を設定してオプトアウトできます。

react-modal docs にあるのは、次のものだけです。

App要素app要素を使用すると、アプリの非表示部分を（aria-hiddenを介して）指定して、スクリーンリーダーなどの支援技術がモーダルのコンテンツ以外のコンテンツを読み取らないようにすることができます。

サーバー側のレンダリングを行う場合、このプロパティを使用する必要があります。

次の方法で指定できます。

DOMElement
Modal.setAppElement(appElement);
_query selector - uses the first element found if you pass in a class._
Modal.setAppElement('#your-app-element');

残念ながら、これは役に立たなかった！ elが何を表しているのかわかりません。

Modalコンポーネントに追加しようとした多くのプロパティバリエーションの一部を以下に示します。

_`appElement={el}`,  
`appElement="root"` where `root` is the id that my App component is injected into   
`appElement={'root'}`   
`appElement="div"`,   
`appElement={<div>}`,   
`appElement={"div"}`  
_

また、_src/index.js_の中からModal.setAppElement('root');を呼び出してみました。ここで、rootはAppコンポーネントが挿入されるルート要素で、index.jsは私がする。

javascriptreactjsreact-modalweb-accessibility
11
SherylHohman

いくつかの解決策は react-modal issue＃133：

問題はここにあります： [email protected]：/lib/helpers/ariaAppHider.js#L1を評価するタイミングに依存します：

  • document.bodyはまだ存在せず、_undefined || null_に解決されます。
  • Modal.setAppElement()がnullで呼び出されるか、_<script />_に置かれた_<head />_でまったく呼び出されない場合（上記と同じ）。
  • おそらく、結果と一致しないselectorで呼び出された場合にも発生する可能性があります。

ソリューション：

ブラウザのレンダリング：

@ yachaka snippet は、_<Modal />_を配置する前に要素を定義することにより、この動作を防止します。

_componentWillMount() {
    Modal.setAppElement('body');
}
_

@ ungoldman answer 、「setAppElement」に依存したくない場合：

バンドルされたアプリケーションJSを_<body>_ではなく_<head>_に挿入します。
理想的には_react-modal_は、DOMがロードされるまで待機してから_document.body_にアタッチしようとします。

サーバ側：

サーバー側でレンダリングする場合は、モーダルスクリプトを要求する前に_document.body_を提供する必要があります（この場合はsetAppElement()を使用する方が望ましいでしょう）。

Update： react docs 上記の情報が含まれるように更新されたため、この問題に直面しているユーザーにとってより明確になるはずです。 。
react-modal issue＃567： ドキュメントに情報を追加します（上記のリンクされたissue＃133から）。

15
SherylHohman

追加 ariaHideApp={false}〜Modal属性。

これは動作するはずです：

<Modal isOpen={!!props.selectedOption}
    onRequestClose={props.clearSelectedOption}
    ariaHideApp={false}
    contentLabel="Selected Option"
    >
</Modal>
7
amrit chhetri

このようにモーダル内にappElement={document.getElementById('app')}を含めるだけです

<Modal
className="modal"
appElement={document.getElementById('app')}
>

反応がロードされるindex.htmlでアプリが中心であれば、100％動作します。

5
Aditya Mishra

参考までに、私にとっては苦痛だったので、SSRを実行している場合は、次のコードを使用してサーバー側のエラーを防止してください。

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

これは、モーダルを使用する任意の場所でcomponentDidMount()に配置できます。または、カスタムモーダルコンポーネントに配置して、ニースとドライにできます。

2
Nathaniel Hill

Warning: react-modal: App element is not defined...テストの実行中にエラーが発生しました（Jestを実行していました）。テストファイルに以下を追加することにより、警告を抑制することができます。

import ReactModal from 'react-modal';
ReactModal.setAppElement('*'); // suppresses modal-related test warnings.
1
JoeTidee

「react-testing-library」を使用したテストでその警告が表示される場合は、解決策があります。 https://github.com/reactjs/react-modal/issues/576#issuecomment-524644035

react-testing-library（ https://testing-library.com/ ）を使用すると、次の警告が表示されなくなります。

import Modal from "react-modal";

const { container } = render(<MyComponent />);
Modal.setAppElement(container);

....  // to the testing, use Modal

または、モーダルコンポーネントを直接テストする場合：

const { container, rerender } render(<MyModalComponent isOpen={false} />);
Modal.setAppElement(container);
// now the appElement is set we can show the modal component
rerender(<MyModalComponent isOpen={false} />);

....  // to the testing
0
Reinhard

これはreact-modal v3.8.1をラップするTypeScript Modalコンポーネントです。

import React from 'react'
import ReactModal from 'react-modal'

interface Props {
  isOpen: boolean
  ariaLabel?: string
}

const Modal: React.FC<Props> = ({
  children,
  ariaLabel = 'Alert Modal',
  isOpen,
}) => (
  <ReactModal
    appElement={document.getElementById('root') as HTMLElement}
    ariaHideApp={process.env.NODE_ENV !== 'test'}
    isOpen={isOpen}
    contentLabel={ariaLabel}
    testId="modal-content"
  >
    {children}
  </ReactModal>
)

export default Modal

state = { isOpen: true }を使用したコンポーネントでの使用：

<Modal isOpen={this.state.isOpen}>
  <p>
    Modal Content here…
  </p>
  <button onClick={() => { this.setState({ isOpen: false }) }}>Okay</button>
</Modal>
0
Beau Smith

ルート要素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;

ここにリファレンスがあります： http://reactcommunity.org/react-modal/accessibility/

0
Mo Hemati