如何解决如何在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 举报,一经查实,本站将立刻删除。