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

问题描述

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

这是我为实现此功能而编写的代码，但是，在将高度渲染到UI时，我无法设置Label 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>
))}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）