Question

对于几个关于元素观察的库，我需要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);

Live Demo here。您可以看到记录的引用是withStyles而不是HTMLElement引用。

Answer 1

您可以为此使用RootRef组件：https://material-ui.com/api/root-ref/#rootref-api

由于v3中的大多数Material-UI组件都是作为类实现的，因此在这种情况下，ref指向类实例（这只是基于类的组件的React行为）。 Material-UI提供RootRef组件作为获取底层DOM元素的一种方式。

对于Material-UI的v4，许多组件（也许在稳定版本发布时，大多数/全部）都将转换为功能组件，然后ref的行为将有所不同，许多/大部分然后，其中的一个应该转发ref，以便它们提供对DOM元素的访问。

材质UI组件未返回HTMLElement引用

1 个答案: