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">

中有此meta

注意：内联样式可在其他任何组件上使用。

Answer 1

好的，问题出在getBoundingClientRect

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

Internet Explorer没有x和y属性，它们具有left和right

IE中未反映React样式道具，getBoundingClientRect没有x和y

1 个答案: