reactjs - React Style props 在 IE 中没有体现，getBoundingClientRect 没有 x 和 y

Question

我创建React.Portal了一些内联样式，这些样式根本不会在 Internet Explorer 中呈现。

这是我的组件。

  const {
    x, y, height, width,
  } = popupAnchorRef.getBoundingClientRect();

  return ReactDOM.createPortal(
    <div
      ref={popupRef}
    >
      <div
        role="presentation"
        className={popupAnchorStyle}
        style={{
          left: x,
          top: topPositionAnchor,
        }}
      />
      <div
        className={popupStyle}
        style={styleForPopupPosition}
      >
        <PopupContents alias={alias} handleClosePopup={handleClosePopup} />
      </div>
    </div>
    ,
    document.body,
  );
};

我在 html 中有这个元数据<meta http-equiv="X-UA-Compatible" content="IE=edge">

注意：内联样式适用于任何其他组件。

Answer 1

好的，问题出在 getBoundingClientRect

  const {
    x, y, height, width,
  } = popupAnchorRef.getBoundingClientRect();

Internet explorer 没有x, 和y财产, 他们有left和top

请参阅：MDN getBoundingClientRect() 文档

显示视口的图形显示 x / left，这意味着 x OR left，以及 y / top，这意味着 y OR top。