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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
Vue中使用vux的配置详解
May 05 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 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
PHP Curl出现403错误的解决办法
2014/05/29 PHP
浅析php单例模式
2014/11/25 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
详解jQuery事件
2017/01/13 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python中模块string.py详解
2017/03/12 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
python 装饰器的基本使用
2021/01/13 Python
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
学术会议通知
2015/04/15 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
爱国之歌(8首)
2019/09/29 职场文书