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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python DataFrame 取差集实例
2019/01/30 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
QML使用Python的函数过程解析
2019/09/26 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
中药专业大学生医药工作求职信
2013/10/25 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
民事和解协议书格式
2014/11/29 职场文书
城南旧事读书笔记
2015/06/29 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
体育教师教学随笔
2015/08/15 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python