当前位置:首页 > 日记 > 正文

React根据宽度自适应高度的示例代码

React根据宽度自适应高度的示例代码

有时对于响应式布局,我们需要根据组件的宽度自适应高度。CSS无法实现这种动态变化,传统是用jQuery实现。

而在React中无需依赖于JQuery,实现相对比较简单,只要在DidMount后更改width即可

Try on Codepen

需要注意的是在resize时候也要同步变更,需要注册个监听器

class Card extends React.Component { constructor(props) {  super(props);  this.state = {   width: props.width || -1,   height: props.height || -1,  } } componentDidMount() {  this.updateSize();  window.addEventListener('resize', () => this.updateSize()); } componentWillUnmount() {  window.removeEventListener('resize', () => this.updateSize()); } updateSize() {  try {   const parentDom = ReactDOM.findDOMNode(this).parentNode;   let { width, height } = this.props;   //如果props没有指定height和width就自适应   if (!width) {    width = parentDom.offsetWidth;   }   if (!height) {    height = width * 0.38;   }   this.setState({ width, height });  } catch (ignore) {  } } render() {  return (   <div className="test" style={ { width: this.state.width, height: this.state.height } }>    {`${this.state.width} x ${this.state.height}`}   </div>  ); }}ReactDOM.render( <Card/>, document.getElementById('root'));

参考资料

React生命周期

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

JS 60秒后重新发送验证码的实例讲

JS 60秒后重新发送验证码的实例讲

验证码,实例,电脑软件,JS,废话不多说,直接上代码//settime($("#getPhoneCode"),60);function settime($obj, time) { if (time == 0) { $obj.attr("disabled", false); $obj.css("background", "#f38401").css("cursor", …

excel次方公式的使用教程详解

excel次方公式的使用教程详解

使用教程,次方,公式,详解,电脑软件,  在Excel录入完数据后,很多时候需要把数据的值进行计算,需要用到次方公式,下面是小编带来的关于的内容,欢迎阅读!excel次方公式的使用教程11:SQRT函数如果要在Excel求某个数的平方根,可以使用SQRT函数返回其…

如何在ppt中插入excel表格图表

如何在ppt中插入excel表格图表

图表,表格,如何在,电脑软件,excel,  PPT的制作中如果需要数据的展示,图表的使用无疑比单纯的数据更加直观,在Powerpoint中插入图标并且快速实现图表的设置编辑。以下是小编为您带来的关于ppt插入excel图表,希望对您有所帮助。ppt插入excel图…

基于JavaScript实现淘宝商品广告效

基于JavaScript实现淘宝商品广告效

淘宝,商品,效果,广告,电脑软件,本文实例为大家分享了JavaScript实现淘宝商品广告效果的具体代码,供大家参考,具体内容如下CSS部分:ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1px…

基于 Bootstrap Datetimepicker 联

基于 Bootstrap Datetimepicker 联

电脑软件,Bootstrap,Datetimepicker,先看一下 层级联动的案例先选择前面时间后 后面的时间不要超过前面的时间先选择后面的时间后,前面的时间不要少于后面的时间下面看封装代码function initDateTimePicker(startTime, endTime, timeFormat…

ps怎么绘制一副电路板图特效?

ps怎么绘制一副电路板图特效?

绘制,电路板,特效,电脑软件,ps,ps具有强大的图片编辑功能,这次小编就为大家分享一下如何用ps制作电路板特效软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先。打开ps,然后新建一个文档。大小为1366…

jquery select插件异步实时搜索实

jquery select插件异步实时搜索实

实时搜索,插件,异步,实例代码,电脑软件,一、先看看效果。二、做此插件的原因。1.数据量过大(几千、几万条),无法一次性全部加载。2.现有插件各不相同,无法满足功能需求。3.美观性,可控性不足。三、如何使用。1.html和js<select id="unit"></se…

excel2007没保存怎么办excel2007没

excel2007没保存怎么办excel2007没

方法,恢复,数据,显示,步骤,  现在使用Excel 2007的人越来越多,但其中的使用方法和诀窍需要在实践中慢慢体会和总结,有时一项很简单、快捷的操作却能给办公人员带来工作效率极大的提升,下面就教你在没有保存Excel文件时,却把它关闭的情况下,怎…

excel使用函数公式的操作步骤

excel使用函数公式的操作步骤

函数,公式,操作步骤,电脑软件,excel,  函数公是excel中比较常用到的,Excel中的函数公式具体该如何操作呢?不太了解的朋友可以看看以下教程,希望对你学习excel函数公式有所帮助!excel使用函数公式的操作步骤 函数公式操作步骤1:通过excel可以…

react 父组件与子组件之间的值传递

react 父组件与子组件之间的值传递

组件,值传递,方法,与子,电脑软件,概念上,组件是封闭的环境。React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事。以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据。那么子组件要如何与父组件沟通这件事,简单的…

ps中怎么制作另类花边文字字体效果

ps中怎么制作另类花边文字字体效果

字体,文字,花边,另类,效果,我们时常会在一些报刊、杂志看过花边字,其主要是起到点缀、烘托的效果。以下小编&ldquo;林曌乐园&rdquo;便为你分享如何通过PS软件制作花边字,希望能帮到你。软件名称:Adobe Flash Professional CS5 官方简体中文完…

photoshop画布如何调整?PS画布大小

photoshop画布如何调整?PS画布大小

设置,方法,调整,大小,电脑软件,photoshop 一款强大测处理软件,通过这款软件可以进行图片处理,也可以进行图片的创作!在创作图片的时候,首先要先对图片的画布进行规划,万一创作到一半发现画布太小,就需要对画布调整,下面就为大家介绍PS画布大小设置…