React Hooks 및 Material-UI : useEffect에서 첫 번째로드시 대화 상자 참조를 얻을 수 없음

debugcn 에 게시 Dev

베니 하나 21

구성 요소가 처음로드 될 때 material-ui Dialog의 DOM 노드에 대한 참조를 얻으려고하는데 참조는 항상 undefined입니다.

내 접근 방식은 다음과 같습니다.

import React, { useEffect, useRef } from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText
} from "@material-ui/core";

export default function App() {
  const dialogRef = useRef();

  useEffect(() => {
    console.log("Dialog Ref");
    console.log(dialogRef.current);
  }, []);

  return (
    <Dialog open ref={dialogRef}>
      <DialogTitle>Ref Test Dialog</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Please check the console to see if a ref to this Dialog was logged.
        </DialogContentText>
      </DialogContent>
    </Dialog>
  );
}

재료 UI 대화 API 문서의 "심판이 루트 요소로 전달됩니다"하고는 내 접근 방식의 기반이되는 상태 useRef 문서 반응 이 작동해야 것 같다, 그래서.

사실, <div>요소 에 동일한 접근 방식을 사용하면 작동합니다. 제가 뭔가 빠졌나요, 아니면 머티리얼 UI의 버그인가요?

다음은 문제의 "작동하는"예입니다.

https://codesandbox.io/s/hopeful-agnesi-3i0p3?file=/src/App.js

라이언 코그 스웰

Dialog는 Modal 을 활용하여 Portal 을 활용합니다 . Material-UI의 Portal 구성 요소는 React의 createPortal API 를 사용 하여 부모 구성 요소의 DOM 계층 외부에서 대화 상자를 렌더링합니다.

의 인수 중 하나는 createPortal렌더링 할 DOM 노드입니다. Dialog는 container prop 를 통해이 DOM 노드 (기본값은 document.body) 제어를 지원합니다 . Material-UI 는 효과에서 컨테이너의 DOM 노드를 가져오고 그 후 Dialog를 렌더링합니다 .

따라서 구성 요소의 초기 렌더링에서 Material-UI의 Portal 구성 요소는 컨테이너를 식별하고 실제로 대화 상자를 렌더링하는 Portal 구성 요소의 후속 렌더링을 트리거합니다.

disablePortal 속성 을 사용하여이 기능을 비활성화 할 수 있습니다. 이 경우 대화 상자가 즉시 렌더링 되고 참조가 예상대로 작동합니다.

기본 포털 동작을 유지하려면 참조를 처음 사용할 수있는 시점에서 코드를 실행하기 위해 콜백 함수를 참조로 전달할 수 있습니다. 이를 수행 할 때 접수 된 주장에 대해 방어적인 태도를 취하는 것이 중요합니다. 콜백 함수는 언 마운트 중에 null로 다시 변경되는 것을 포함하여 ref가 변경 될 때마다 호출됩니다.

이 기능을 넣을 수 있는 onRendered prop 도 있습니다. 그러나 문서 는 v5에서 더 이상 사용되지 않고 제거되고 대신 ref를 사용한다고 표시합니다.

다음은 ref에 콜백 함수를 사용하는 것을 보여주는 수정 된 샌드 박스 버전입니다.

import React, { useEffect, useRef } from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText
} from "@material-ui/core";

export default function App() {
  const dialogRef = useRef();

  useEffect(() => {
    console.log("Dialog Ref", dialogRef.current);
  }, []);

  return (
    <Dialog
      open
      ref={(node) => {
        dialogRef.current = node;
        // Do your work requiring the node here, but make sure node isn't null.
        console.log("ref function", node);
      }}
      onRendered={() => console.log("onRendered", dialogRef.current)}
      onEntering={() => console.log("onEntering", dialogRef.current)}
      onEntered={() => console.log("onEntered", dialogRef.current)}
    >
      <DialogTitle>Ref Test Dialog</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Please check the console to see if a ref to this Dialog was logged.
        </DialogContentText>
      </DialogContent>
    </Dialog>
  );
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

React Hooks 및 Material-UI : useEffect에서 첫 번째로드시 대화 상자 참조를 얻을 수 없음

React Hooks 및 Material-UI : useEffect에서 첫 번째로드시 대화 상자 참조를 얻을 수 없음

레일은 첫 번째 시도에서만 상수를 자동로드 할 수 없습니다.

WinAPI 첫 번째 대화 상자에서 버튼 컨트롤을 클릭 한 후 두 번째 대화 상자를 만들고 첫 번째 대화 상자를

두 번째로 jquery UI 대화 상자를 열 수 없습니다.

Material UI Select component React Hooks에서 JSON 객체를 Const로 설정

PyQt4 : 첫 번째 코드를 작성할 때 대화 상자를 열 수 없습니다.

강조 표시된 요소의 첫 번째 및 마지막 자식에서 다른 배경을 만드는 jQuery UI 달력

ASP-첫 번째 포스트 백 후 Jquery 대화 상자 UI 기능이 기능을 잃음

참조 된 열이 첫 번째 열로 나타나는 참조 된 테이블에서 인덱스를 찾을 수 없습니다.

버튼 클릭 UI 대화 상자에서 Chrome에 두 번째 오버레이를 표시 할 수 없습니다.

Material UI TextField 상태를 숫자로 초기화 및 설정

jquery UI 대화 상자를 두 번 열 수 없습니다.

Material-ui Dialog : Escape 버튼 조작 및 대화 상자 외부에서 마우스 클릭

Material-UI + React : 확장기로 카드를 확장 할 수 없음

React js에서 텍스트 상자의 첫 번째 값을 편집 할 수 없도록 만드는 방법은 무엇입니까?

경고 대화 상자 및 예외 오류의 RatingBar에서 값을 가져올 수 없음 (Android)

경고 대화 상자 조각에서 동일한 줄에 양수 및 음수 버튼을 모두 설정하십시오.

React setState는 fileList를 할당 할 수 없으며 대신 첫 번째 fileName의 문자열을 할당합니다.

첫 번째 시도에서 Centos에서 새로 생성 된 사용자로 ssh 할 수 없음

함수를 절대 참조에서 상대 참조로 변환

내 String 메서드의 첫 번째 요소에 대한 getText를 어떻게 얻을 수 있습니까?

첫 번째 차용을 삭제 한 후에도 "두 번 이상 가변으로 차용 할 수 없음"

AEM의 대화 상자에 이미지를 표시 할 수 없음

r에서 ac 프로 시저를 호출하는 첫 번째 문자를 제외하고 문자열의 문자를 읽을 수 없습니다.

첫 번째 : "vcvarsall.bat를 찾을 수 없음"및 현재 : "TypeError : 정렬 할 수없는 유형 : NonType ()> = str ()"

첫 번째 대화 상자

첫 번째 인수에 대해 'A'에서 'A &&'로 알려진 변환 없음

Material-ui 목록-모듈을 찾을 수 없음 : 'react'

참고 : 누락 된 vtable은 일반적으로 첫 번째 인라인이 아닌 가상 멤버 함수에 정의가 없음을 의미합니다.

목록 대화 상자 조각-리소스를 찾을 수 없음 예외