Компоненты пользовательского интерфейса материала, не возвращающие ссылку HTMLElement

Question

Для пары библиотек по наблюдению за элементами мне требуется ref prop для возврата HTMLElement, однако 99% компонентов MUI этого не делают. Что мне не хватает? Как получить ссылку на корневой элемент компонента?

Для пары библиотек по наблюдению за элементами мне требуется ref prop для возврата HTMLElement, однако 99% компонентов MUI этого не делают. Что мне не хватает? Как получить ссылку на корневой элемент компонента?

import React, {
    useState, useRef
} from "react";
import ReactDOM from "react-dom";
import useInView from "react-hook-inview";
import {
    Card
}
from "@material-ui/core";

function App() {
    const container = useRef();
    const[inViewport, setInViewport] = useState(false);
    useInView({
        target: container,
        unobserveOnEnter: true,
        onEnter: () = > setInViewport(true)
    });
    console.log(container);
    return ( < Card ref = {
            container
        }
        style = {
            {
                textAlign: "center"
            }
        } >
        <h1>{inViewport ? "In viewport" : "Not in viewport"}</h1> < /Card>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App / > , rootElement);

Демо здесь . Вы можете увидеть зарегистрированную ссылку с withStyles вместо ссылки HTMLElement.

Answer 1

Для этой цели вы можете использовать компонент RootRef: https://material -ui.com / api / root-ref / # rootref-api

Поскольку большинство компонентов Material-UI в v3 реализованы как классы, ref в этих случаях будет указывать на экземпляр класса (это просто поведение React для компонентов на основе классов). Material-UI предоставляет компонент RootRef как способ получить доступ к базовому элементу DOM.

Для v4 Material-UI многие (возможно, большинство / все к моменту выпуска стабильной версии) компонентов преобразуются в функциональные компоненты, и тогда поведение ref будет другим, и многие / большинство из них Затем следует пересылать ссылки, чтобы они обеспечивали доступ к элементу DOM.