无法获取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>
  );