react怎么设置div高度
react设置div高度的方法:1、通过css方式实现div高度;2、在state中声明一个对象C,并在该对象中存放更换按钮的样式,然后获取A并重新设置C中的“marginTop”即可。
本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。
react怎么设置div高度?
react动态设置元素高度
使用react实现动态修改样式(不建议使用此方式,除非没有其他选择)
如下图所示:

需求
实现图中的更换按钮紧随图片的右下方,图片高度发送改变时,更换按钮的位置也跟着改变。
思路
1.通过css方式实现(改方案暂时没有解决办法)
2.利用react数据驱动视图的特性
2.1 数据:在state中声明一个对象C,该对象存放更换按钮的样式。
2.2 操作: 设 A = 图片高度, B = 更换按钮高度。图片加载完成后,获取A并将重新给设置C中的marginTop。(该思路只需改变数据,不需要考虑视图层)
完整代码
construct中
this.state = { updateBtnStyle :{ fontSize: "12px",marginLeft:'20px',marginTop:'300px', } } //在class中定义的函数,如果需要使用到全局this,需要此操作 this.loading = this.loading.bind(this)
声明操作函数loading
loading(){ const imgHeight = document.getElementById('facePhoto').height console.log('图片的高度',document.getElementById('facePhoto')?.height) if(imgHeight === Number.parseInt(this.state.updateBtnStyle.marginTop)+24) return else{ this.setState({ updateBtnStyle:{ marginTop:document.getElementById('facePhoto')?.height-24+'px' } }) } }
视图层伪代码
<Item label="人脸照片" style={{ position: "relative" }} required> <img id={'facePhoto'} src={photo} alt="" width="300" onLoad={this.loading} style={{float:'left'}}/> <Button size="small" style={updateBtnStyle} onClick={() => StateManage.set(updatePhotoProps, { visible: true })}>更换</Button> </Item>
过程遇到的问题
1.获取图片的高度:
1.1 获取的时间:需要等图片加载完成后获取其高度才有效,因此需要使用img的onLoad事件,确保获取图片高度时,图片已经加载完成。
1.2 获取的方式: 图片的宽高度是通过属性height,width,而不是通过style设置,因此获取高度的方法=document.getElementById('xxx').height
2.声明的函数没有绑定this,导致无法使用setState
推荐学习:《react视频教程》
以上是react怎么设置div高度的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

调用方法:1、类组件中的调用可以利用React.createRef()、ref的函数式声明或props自定义onRef属性来实现;2、函数组件、Hook组件中的调用可以利用useImperativeHandle或forwardRef抛出子组件ref来实现。

怎么调试React源码?下面本篇文章带大家聊聊多种工具下的调试React源码的方法,介绍一下在贡献者、create-react-app、vite项目中如何debugger React的真实源码,希望对大家有所帮助!

React 自定义 Hook 是一种将组件逻辑封装在可重用函数中的方式,它们提供了一种在不编写类的情况下复用状态逻辑的方式。本文将详细介绍如何自定义封装 hook。

React为什么不将Vite作为构建应用的首选?下面本篇文章就来带大家聊聊React不将Vite作为默认推荐的原因,希望对大家有所帮助!

本篇文章给大家整理分享7 个很棒且实用的React 组件库,日常开发中经常会用到的,快来收藏试试吧!

react设置div高度的方法:1、通过css方式实现div高度;2、在state中声明一个对象C,并在该对象中存放更换按钮的样式,然后获取A并重新设置C中的“marginTop”即可。

我时常会听到人们谈起React函数组件,提到函数组件会不可避免的变得体积更大,逻辑更复杂。毕竟,我们把组件写在了“一个函数”里,因此你不得不接受组件会膨胀导致这个函数会不断膨胀。

在进行前端项目开发时,状态管理始终是一个绕不开的话题,Vue 与 React 框架本身提供了一部分能力去解决这个问题。但是在开发大型应用时往往有其他考虑,比如需要更规范更完善的操作日志、集成在开发者工具中的时间旅行能力、服务端渲染等。本文以 Vue 框架为例,介绍 Vuex 与 Pinia 这两种状态管理工具在设计与实现上的区别。
