如何使用ReactJS中的set state动态设置两个或多个分区的高度？

我正在尝试使用ReactJS中的div标记创建一个表（如下所示）。但是，在设置每个div行的动态高度时面临挑战。在下面的屏幕截图中，我想动态设置标签A和标签B的高度

下面是我为实现此功能而编写的代码，但是，在向UI呈现高度时，我无法设置标签B分区的高度。如果您能帮助我告诉我如何使用状态变量动态设置标签A、标签B、标签C等每个分区的高度，那就太好了

Condition = el => {
var height = el.offsetHeight;
var newHeight = height ;
this.setState({height1:newHeight+ 'px'});
}; //while looping this function will be called and will store div height in state

//this is in render method
{res.scenarios.map((value, index) => (

<div className="Cell"><p > {
value.criteria.map((h1, ind1) => {

var data = value.inclusionNdExclusion.map((i, ind) => {
return ind1 === ind ?
i.incOrExcName.map((h, u1) => {
return h1 === "" && h === "" ? "" : h1 !== " " && h === "" ? "-" : (h)
})
: ""
})

var d = data.map((i, u) => {
return i.length > 0 ?
i.map((hd, u1) => {
return ind1 === 0 ?
(u1!==0?<div > {hd} </div>:<div style={{ border:"1px solid green" }}> {hd} </div>) :
(ind1 === 1 && u1 === 0) ? <div style={{ paddingTop: 20 }}>{hd
} </div> : (ind1 !== u1 ? <div style={{ paddingTop: 8 ,border:"1px solid pink"}}>{hd} </div> : <div style={{ paddingTop: 8 }}>{hd} </div>)
})
: ""

})
return ind1 == 0 ? <div ref={this.Condition} style={{ border: " 1px solid black" }}>{d}</div> : <div style={{ border: " 1px solid red" }}>{d}</div>
})
} </p>
</div>

//using the state variable and setting as height of another div

<div className="Cell" ><p > {value.criteria.map((h, ind) => {

return (ind !== 0 ? h === "" ? <div style={{ height:this.state.height1; border:"1px solid green"}}> {h}</div> : <div> style={{paddingTop:0,border:"1px solid pink" }}> {h}</div> : <div style={{ border:"1px solid blue" }}> {h}</div>)
})}</p></div>
))}

Condition=el=>{
var高度=el离地高度；
var newHeight=高度；
this.setState（{height1:newHeight+'px'}）；
}; //循环时，将调用此函数并在状态中存储div height
//这是在渲染方法中
{res.scenarios.map（（值，索引）=>(
{
value.criteria.map（（h1，ind1）=>{
var数据=value.inclusionNdExclusion.map（（i，ind）=>{
返回ind1==ind？
i、 incOrExcName.map（（h，u1）=>{
返回h1==“”&&h==“”？“”：h1！==“”&&h==“”？“-”：（h）
})
: ""
})
var d=数据映射（（i，u）=>{
返回i.length>0？
i、 地图（（高清，u1）=>{
返回ind1==0？
（u1！==0？{hd}:{hd}）：
（ind1==1&&u1==0）{hd
}：（ind1！==u1？{hd}:{hd}）
})
: ""
})
返回ind1==0？{d}:{d}
})
}

//使用状态变量和设置作为另一个div的高度
{value.criteria.map（（h，ind）=>{
return（ind！==0？h==“”？{h}:style={{{paddingTop:0，边框：“1px纯色”}}>{h}:{h}）
})}

))}

为什么不使用简单的

表格

？这将更加容易，而且在语义上更加正确。否则，请查看网格和flexbox。