Question

我需要查询一个 DOM 元素并使用 useRef 钩子：

const Overlay = ({ children }: Props) => {
  const myRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    console.log(myRef.current);
  }, [myRef]);


  return (
    <React.Fragment>
      <Dialog fullScreen open={open}>
        <DialogContent id="dialog" ref={myRef}>
          <header>
           // Header
          </header>
          {children}
        </DialogContent>
      </Dialog>
    </React.Fragment>
  );
};

export default Overlay;

如果我检查控制台，它会返回 null。

我需要做什么才能使用 useRef 查询 DOM 元素？

Answer 1

因此 MUI Dialog 组件仅在 open === true 时挂载它的子组件。我建议让您的 useEffect 依赖于 open 状态而不是引用。

  useEffect(() => {
    if (open) {
      console.log(myRef.current);
    } else {
      // myRef.current is null
    }
  }, [open]);

为什么 React ref element.current 使用 useRef 钩子在 React 组件中返回 null？

1 个答案: