Javascript 获取组件B的css高度，如果组件B未安装，则为零

我有两个反应组分，组分A和组分B

组件B具有

高度：90px

组件A具有<代码>高度：计算（100vh-90px）

当页面加载时，组件B不在DOM中，它将被呈现，并在用户单击某个内容时出现在屏幕上

我希望组件A具有
高度：calc（100vh）如果组件B不在DOM中或不可见，并且我希望组件A具有
高度：calc（100vh-90px）组件B已安装或可见时

我如何做到这一点？我是否可以使用钩子而不使用
文档。获取

import React, { useCallback, useEffect, useState }  from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";

const Main = () => {

useEffect(() => {
// i try to update Component A height here, 
// but this block doesnt get called when Component B is mounted
}, [])

return (
      <div className={style.Main}>
        <Router>
          <ComponentA/>
          <ComponentB/>
          ...
        </Router>
      </div>
)

}
export default Main;

编辑

父div是一个css网格

.Main {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
gap: 0px 0px;
grid-template-areas:
        "componentA Header"
        "componentA Body"
        "componentB componentB";
}

<>这是一个你可以考虑的简单方法。我使用了背景色来突出显示组件高度的变化

import { useEffect, useState } from 'react';
import './App.css';

const CompA = ({style, updateStyle}) => {
  return  <div style={style}>
    <h2>Component A</h2>
    <button onClick={updateStyle}>Update Height</button>
  </div>
}

const CompB = () => {
  return  <div style={{height:'90px', backgroundColor:'blue'}}>
    <h2>Component B</h2>
  </div>
}
function App() {
  const [btnClicked, setBtnClicked] = useState(false);
  const [defaultStyle, setDefaultStyle] = useState({
    height:'100vh',
    background:'red'
  });

  useEffect(() => {
    if(btnClicked) {
      setDefaultStyle({height:`calc(100vh - 90px)`,background:'yellow'})
    }

  }, [btnClicked])

  return (
    <div>
      <CompA style={defaultStyle} updateStyle={()=>setBtnClicked(true)}/>
      { btnClicked && <CompB /> }
    </div>
  );
}

export default App;

从'react'导入{useffect，useState}；
导入“/App.css”；
常量CompA=（{style，updateStyle}）=>{
返回
A部分
更新高度
}
常数CompB=（）=>{
返回
B部分
}
函数App（）{
const[btnClicked，setbtnicked]=useState（false）；
const[defaultStyle，setDefaultStyle]=useState({
高度：'100vh'，
背景：“红色”
});
useffect（（）=>{
如果（已单击）{
setDefaultStyle（{height:`calc（100vh-90px）`，背景：'yellow'}）
}
}，[btnClicked]）
返回(
setBtnClicked（true）}/>
{btnClicked&&}
);
}
导出默认应用程序；
请添加您需要的相关代码片段tried@SuperDJ加了一些
import { useEffect, useState } from 'react';
import './App.css';

const CompA = ({style, updateStyle}) => {
  return  <div style={style}>
    <h2>Component A</h2>
    <button onClick={updateStyle}>Update Height</button>
  </div>
}

const CompB = () => {
  return  <div style={{height:'90px', backgroundColor:'blue'}}>
    <h2>Component B</h2>
  </div>
}
function App() {
  const [btnClicked, setBtnClicked] = useState(false);
  const [defaultStyle, setDefaultStyle] = useState({
    height:'100vh',
    background:'red'
  });

  useEffect(() => {
    if(btnClicked) {
      setDefaultStyle({height:`calc(100vh - 90px)`,background:'yellow'})
    }

  }, [btnClicked])

  return (
    <div>
      <CompA style={defaultStyle} updateStyle={()=>setBtnClicked(true)}/>
      { btnClicked && <CompB /> }
    </div>
  );
}

export default App;