无法获取ref.current.offsetWidth

Question

我正在尝试制作contextMenu。

我想从ref.current获取offsetWidth和offsetHeight，但console.log打印未定义。

const ContextMenu: React.FC<ContextMenuProps> = props => {
  const thisComponent = useRef(null);
  const [isVisible, setIsVisible] = useState<boolean>(false);
  let thisComponentHeight = null;
  let thisComponentWidth = null;

  useEffect(() => {
    document.addEventListener("contextmenu", contextMenuHandler);
    if (thisComponent && thisComponent.current) {
      thisComponentWidth = thisComponent.current;
      thisComponentHeight = thisComponent.current;
      console.log(thisComponent.current)
    }
  }, []);

  return (
    <Column ref={thisComponent}>
      <div>test</div>
      <div>test2</div>
    </Column>
  );
};

export default ContextMenu;

这是console.log(thisComponent.current);

的图片

Answer 1

该Column组件看起来像属于另一个库，而不是React本身的东西，因此他们可能已经在current对象中定义了自己的属性集。只需将Column包裹在div或span中，然后将该标记赋予ref。您将可以获得offsetWidth以及本机DOM属性。

  return (
    <div ref={thisComponent}>
      <Column>
        <div>test</div>
        <div>test2</div>
      </Column>
    </div>
  );