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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
详解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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python对文件操作知识汇总
2016/05/15 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python读取Excel表格文件的方法
2019/09/02 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Python如何读取、写入JSON数据
2020/07/28 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
升国旗仪式主持词
2014/03/19 职场文书
社区灵活就业证明
2014/11/03 职场文书
高考1977观后感
2015/06/04 职场文书
海洋天堂观后感
2015/06/05 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server