TypeScript를 사용하여 React 의 material-ui Box 컴포넌트에 ref를 어떻게 추가 할 수 있습니까? GreenSock / GSAP 와 같은 애니메이션 라이브러리가 노드를 애니메이션 할 수 있도록하는 것이 중요합니다 . 당 재료 UI 문서 는의 사용을 필요로하기 때문에,의 itemref가 작동하지 않습니다를 사용 findDOMNode (반작용 동시에 대한 준비) 엄격 모드에서 사용되지 않는 추가 가능성 가상 DOM 렌더링으로 인해 파괴하는 것입니다 있습니다.
참조 를 ALL MATERIAL-UI GENERATED NODES 에 연결하는 기능이 없으면 특정 노드를 대상으로하는 애니메이션 라이브러리를 통합하는 신뢰할 수있는 방법이 없습니다.
material-ui GitHub 프로젝트에는 몇 가지 관련 문제가 있습니다. material-ui에 생성 된 모든 노드에 참조 를 추가하는 기능이 포함될 때까지 문제 # 17010 에 대한 해결 방법을 게시했습니다 .
관련 문제:
임시 해결 방법 :
// 1. Import style library, either Emotion or Styled-Components
import styled from "@emotion/styled";
// 2. Recreate the Material-UI Box with a styled component
const StyledBox = styled(Box)``;
// 3. Usage in the render
<StyledBox ref={boxRef}>Box Content</StyledBox>
참고 : @ material-ui / core / styles 사용은 작동하지 않으므로 감정 또는 스타일 구성 요소를 사용해야 합니다 . 스타일 구성 요소에 의해 고유하게 생성되는 애니메이션 깜박임 문제로 인해 스타일 구성 요소보다 감정을 사용해야합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다