react-sizeme 不测量组件的高度

Question

我正在使用 react-sizeme 来测量来自 ant design 的 Content 组件的 height/width。这是我的代码：

 <SizeMe render={({ size }) => {
            if (size.width == null && size.height == null) {
              return <Content></Content>
            } else {
              //Content contains a lot of HTML, so I only want to fully render it after the inital size has been determined
              return <Content>Width: {size.width} Height: {size.height}</Content>
            }
          }} />

然而，size.height 是 undefined/null。为什么没有测量高度，我该如何解决这个问题？

Answer 1

默认情况下，SizeMe 不会跟踪身高。您可以通过添加 monitorHeight:

来解决此问题

import React from "react";
import ReactDOM from "react-dom";
import { SizeMe } from "react-sizeme";

function App() {
  return (
    <SizeMe
      monitorHeight
      render={({ size }) => {
        return <h1>I am {size.height}px tall!</h1>;
      }}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您可以在 Github 存储库 here 上查看可用选项。

react-sizeme 不测量组件的高度

react-sizeme doesn't measure height of component

reactjs

react-component