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


Posted in Javascript onOctober 11, 2017

有时对于响应式布局,我们需要根据组件的宽度自适应高度。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根据宽度自适应高度的示例代码

React生命周期

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

Javascript 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
jQuery Selector选择器小结
May 06 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
详解vue中使用express+fetch获取本地json文件
Oct 10 #Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 #Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 #Javascript
ionic选择多张图片上传的示例代码
Oct 10 #Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 #Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 #Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 #Javascript
You might like
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
商场消防演习方案
2014/02/12 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
python 对图片进行简单的处理
2021/06/23 Python