"경고: 반응 모드:App 요소가 정의되지 않았습니다.'모달'을 사용하세요.setAppElement(el) 또는 set '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"
>
...
}
}
서 ★★★★★...코드가 표시되지 않음을 나타냅니다.
모든 것이 정상적으로 동작하지만, 모달(Modal)을 열면 콘솔에 다음 경고가 나타납니다.
indexindex.js:2177 경고:react-modal:앱입니다.★★★★★★를 사용해 .
Modal.setAppElement(el)「」를 설정합니다.appElement={el}모달 열기 시 화면 리더가 메인 콘텐츠를 보지 않도록 하기 위해 필요합니다.권장되지는 않지만, 다음 설정을 통해 옵션을 해제할 수 있습니다.ariaHideApp={false}.
react-modal 문서에서 찾을 수 있는 것은 다음과 같습니다.
App Element 앱 요소를 사용하면 화면 판독기 등의 보조 기술이 모달의 콘텐츠 이외의 콘텐츠를 읽지 못하도록 앱에서 (아리아를 통해) 숨겨야 할 수 있습니다.
서버측 렌더링을 실시하는 경우는, 이 속성을 사용할 필요가 있습니다.
다음과 같은 방법으로 지정할 수 있습니다.
dome
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"}`
Modal.setAppElement('root');src/index.js서, snowledge.root입니다.Appindex.입니다.index.js는 이 작업을 수행합니다.
ariaHideApp={false}로로 합니다.Modal★★★★★★ 。
이 조작은 유효합니다.
<Modal isOpen={!!props.selectedOption}
onRequestClose={props.clearSelectedOption}
ariaHideApp={false}
contentLabel="Selected Option"
>
</Modal>
리액트 모달호 133에 몇 가지 해결책이 제시되어 있습니다.
문제는 여기에 있습니다.react-modal@1.6.5:/lib/helpers/ariaApp 평가 시기에 따라 달라집니다.Hider.js#L1:
- 은 아직 , 본문은 본문으로 해결됩니다.
undefined || null Modal.setAppElement()요.null아예 안 요.<script />위에 놓였다<head />(일부러)- '어쩌면'으로 수 요.
selector어떤 결과에도 일치하지 않습니다.
솔루션:
브라우저 렌더링:
@paramaka 스니펫은 이 동작을 방지합니다.요소를 정의하고 나서<Modal />
componentWillMount() {
Modal.setAppElement('body');
}
@ungoldman answer, setAppElement에 의존하지 않는 경우:
번들 어플리케이션 JS를 에 주입합니다.
<body>대신<head>.
이상적이긴 하지만react-modalDOM 이 로드될 때까지 대기하여 접속을 시도합니다.document.body.
서버측:
서버측에서 렌더링 하는 경우는,
document.bodymodal 스크립트를 요구하기 전에 (사용하는 것이 좋습니다)setAppElement()(이 경우)를 참조해 주세요.
업데이트: 리액트 문서가 위의 정보를 포함하도록 업데이트되었으므로 이 문제에 직면한 사용자에게 더 명확해질 것입니다.
react-modal issue #567: (상기 링크된 문제 #modal의) 정보를 문서에 추가합니다.
포함시키기만 하면 됩니다.appElement={document.getElementById('app')}네 모달 안에 이렇게
<Modal
className="modal"
appElement={document.getElementById('app')}
>
앱이 react가 로드되는 index.html의 중심이라면 100% 동작합니다.
이것은 나의 TypeScript입니다.Modal랩하는 컴포넌트react-modalv3.8.1:
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>
를 취득한 경우Warning: react-modal: App element is not defined...테스트 실행 중 오류(Jest 실행 중)에 대해 다음 사항을 테스트 파일에 추가하여 경고를 억제할 수 있습니다.
import ReactModal from 'react-modal';
ReactModal.setAppElement('*'); // suppresses modal-related test warnings.
가장 짧은 해결책은 다음을 추가하는 것입니다.
appElement={document.getElementById("hereIsYourRootElementId")}
이를 통해 react-modal은 루트 요소가 어디에 있는지 알 수 있습니다.
참고로 SSR를 실행하는 경우 번거롭기 때문에 서버 측에서 다음 코드를 사용하여 오류를 방지하십시오.
if (typeof(window) !== 'undefined') {
ReactModal.setAppElement('body')
}
이거 넣어도 돼componentDidMount()모달 사용하시는 곳이나 커스텀 모달 컴포넌트에 넣을 수 있기 때문에 좋고 드라이합니다.
그냥 이거 놔요
Modal.setAppElement('#root')
이것으로 경고가 해결됩니다.공용 폴더 index.html 내부의 루트 요소.
루트 요소 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/
"http-http-http://https://github.com/reactjs/react-modal/issues/576#issuecomment-524644035 를 사용한 테스트에 관한 경고가 표시되는 경우는, 다음의 해결 방법을 참조해 주세요.
react-display-displays(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
Nextjs의 경우, 컴포넌트가 선언되기 전에 아래를 modal 컴포넌트 외부에 추가함으로써 해결할 수 있다고 생각합니다.
Modal.setAppElement('#__next')
이 특성 className="modal"을 삭제하고 다시 실행하십시오.
언급URL : https://stackoverflow.com/questions/48269381/warning-react-modal-app-element-is-not-defined-please-use-modal-setappeleme
'programing' 카테고리의 다른 글
| 기본 글로벌 json 시리얼라이저 설정 (0) | 2023.03.20 |
|---|---|
| ngClass에서 동적 값을 사용하는 방법 (0) | 2023.03.20 |
| React Context API - 페이지 새로 고침 시 데이터 유지 (0) | 2023.03.20 |
| '데코레이터'란 무엇이며 어떻게 사용됩니까? (0) | 2023.03.20 |
| js-file Wordpress 내의 php (0) | 2023.03.20 |