ReactJS App：是否可以订购特定 div 的渲染？

Question

我正在尝试创建一个 ReactJS（使用 react bootstrap）移动应用程序，它可以根据屏幕大小调整（扩展或收缩）自身的大小。应用某个部分的尺寸需要根据所有其他部分都渲染后屏幕上剩余的空间来计算。

例如，考虑下面的标记 -

var calcWidth = (100 / tableSize).toString() + '%';
return( 
<Container>
    <Row id='1'>Header and other static stuff here</Row>
    <Row id='2'>
        //A db driven table with square shaped cells goes here. It has the below structure -
        <Container style={{width:'100%'}}>
            <Row><Col style={{width:calcWidth, paddingBottom:calcWidth}}></Col>...</Row>
            ...
        </Container>
    </Row>
    <Row id='3'>Footer and other static stuff here</Row>
</Container>
);

在上面的标记中，第 1 行和第 3 行包含静态内容，如页眉、页脚、按钮、标题等。第 2 行包含一个表格，可以包含“n”个单元格，每个单元格都需要是方形的内容水平和垂直居中。

上面的代码根据容器的宽度（即 100%）正确计算了每个单元格的宽度，并创建了方形单元格并完美地水平放置。但由于高度与宽度相同，它会在垂直方向变大并将页脚驱动到屏幕之外。我们要避免滚动条。解决方案似乎是根据表格可用的剩余高度计算calcWidth，如下所示 -

var remainingHeight = <total height of the container> - <height taken up by Row 1> - <height taken up by Row 3>
var width = <width of the screen>
var calcWidth = ((remainingHeight < width ? remainingHeight : width) / tableSize).toString() + '%';

我的问题是 -

1. 如何计算上面的remainingHeight变量？如何让 Row1 和 Row3 在 Row2 之前渲染，然后计算剩余高度？
2. 如何求容器的总高和总宽？
3. 还有其他更好的方法吗？我只是一个新手，可能有一些 css 工具可以更有效地完成它？

Answer 1

Here you can find an example on how to calculate the height of react components after rendering:

export default function App() {
  const [height1, setHeigt1] = useState(0);
  const [height2, setHeight2] = useState(0);
  const [height3, setHeight3] = useState(0);
  const [remainingHeight, setRemainingHeight] = useState(0);

  useEffect(() => {
    const remainingHeight = 100 - height1 - height2 - height3;
    console.log(remainingHeight);
    setRemainingHeight(remainingHeight);
  }, [setRemainingHeight, height1, height2, height3]);

  return (
    <div
      id="container"
      style={{
        height: "100px",
        backgroundColor: "firebrick",
        padding: "15px"
      }}
    >
      <ResizableComponent
        id="component-1"
        content={`Initial component 1 height = ${height1}`}
        onHeightUpdated={setHeigt1}
      />
      <ResizableComponent
        id="component-2"
        content={`Initial component 2 height = ${height2}`}
        onHeightUpdated={setHeight2}
      />
      <ResizableComponent
        id="component-3"
        content={`Initial component 3 height = ${height3}`}
        onHeightUpdated={setHeight3}
        remainingHeight={remainingHeight}
      />
    </div>
  );
}

export function ResizableComponent({
  id,
  content,
  onHeightUpdated,
  remainingHeight
}) {
  const [height, setHeight] = useState(0);
  const [isFirstRender, setIsFirstRender] = useState(true);

  useEffect(() => {
    const newHeight = document.getElementById(id).clientHeight;
    if (height !== newHeight && isFirstRender) {
      setHeight(newHeight);
      setIsFirstRender(false);
    }
  }, [isFirstRender, id, height, onHeightUpdated, remainingHeight]);

  useEffect(() => {
    onHeightUpdated(height);
  }, [height, onHeightUpdated]);

  return (
    <div
      id={id}
      style={
        remainingHeight
          ? {
              backgroundColor: "pink",
              height: `calc(${height}px + ${remainingHeight}px)`
            }
          : { backgroundColor: "pink" }
      }
    >
      {content}
    </div>
  );
}