Typescript / React: Как добавить ссылку на компонент Material-ui Box? - PullRequest
Новая
       33

Typescript / React: Как добавить ссылку на компонент Material-ui Box?

1 голос
/ 18 января 2020

Как можно добавить ref к компоненту material-ui Box в React, используя TypeScript? Это важно, чтобы библиотеки анимации, такие как GreenSock / GSAP , могли анимировать узлы. Согласно material-ui docs , использование itemRef не будет работать, поскольку требует использования findDOMNode , которое устарело в строгом режиме (подготовка к параллельному React) и в дальнейшем может прерваться из-за к виртуальному рендерингу DOM.

1 Ответ

0 голосов
/ 18 января 2020

Без возможности связать ref с ВСЕМИ УЗЛАМИ, СОДЕРЖАЩИМИ МАТЕРИАЛ-UI , не существует надежного способа интеграции библиотек анимации, ориентированных на указанные c узлы.

В проекте material-ui GitHub есть несколько связанных вопросов. Я опубликовал обходной путь на Выпуск # 17010 , пока материал-пользовательский интерфейс не включит возможность добавления ref ко всем сгенерированным узлам.

Связанные проблемы:

  • Как добавить ссылку на компонент Box? # 19284
  • [Box] Разрешить ref для Box # 19275
  • ref отсутствует в Box в определении TypeScript # 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 не работает, требуя использования emotion или Styled-компоненты . Мы вынуждены использовать эмоции над стилевыми компонентами из-за проблемы мерцания анимации, уникально генерируемой стилевыми компонентами.

...