React组件自适应窗口宽高

最新推荐文章于 2024-06-27 14:17:05 发布

weixin_34163741

最新推荐文章于 2024-06-27 14:17:05 发布

阅读量3.7k

点赞数 1

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/JerryD/p/11052741.html

版权

本文探讨了如何使React组件根据窗口尺寸变化进行自适应调整，特别是在处理iframe和antd Table组件时。通过使用 vh 单位、React的ref以及元素的clientHeight属性，实现了iframe组件高度随窗口高度变化以及Table组件智能滚动的效果。同时，文章还涉及了React组件的生命周期和滚动区域的设置。

摘要由CSDN通过智能技术生成

很多时候我们需要组件能够根据窗口变化改变宽高，有时候可以使用css,有时候需要随数据调整则使用js计算。

比如说，当我们在页面中放置一个iframe时，我们希望它的宽高随着其父元素or窗口的变化而变化；

再比如说，当我们引用一个ant Table组件，并且动态传入columns及dataSource时，由于需要控制sroll值我们需要获得动态的width和height；

......

下面我们举几个栗子

例1：使用antd layout布局，如下图，content宽高会随着窗口变化，我们希望iframe-component组件也随之变化，以至于iframe高度超出时iframe显示滚动条，该怎么写呢？

我们知道layout是flex布局，所以即使我们用下面的css也不能实现需求，因为content没有宽高，他的子元素使用height:100%起不到作用。

.iframe-component{
  width:100%;
  height:100%;  
}

.iframe{
  width:100%;
  height:calc(100% - 30px);  
}

怎么办呢？我们可以使用vh单位给iframe-component设置宽高。这样i

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34163741

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

React 使用postMessage获取iframe内容高度完成自适应(不设置高度)

闫瑞锋的博客

05-14

486

通过postMessage动态获取iframe内容高度完成自适应

React根据宽度自适应高度

weixin_34353714的博客

10-10

1491

有时对于响应式布局，我们需要根据组件的宽度自适应高度。CSS无法实现这种动态变化，传统是用jQuery实现。而在React中无需依赖于JQuery,实现相对比较简单，只要在DidMount后更改width即可 Try on Codepen 需要注意的是在resize时候也要同步变更，需要注册个监听器 class Card extends React.Component { constru...

参与评论您还未登录，请先登录后发表或查看评论

React中大屏适配

最新发布

xiaoka__xm的博客

06-27

619

这里原本是有一个eject的运行指令的，运行完后这个指令会自动消失，然后运行。这个插件的主要作用是将像素（px）单位转换为。值（以像素为单位）。重新启动项目，页面适配就完成了！单位，从而方便进行响应式设计。的作用是指定根元素（通常是。

react获取当前窗口宽高（hook方式）

weixin_44197210的博客

08-13

7826

使用useWindowSize js方式使用 //引入根据你自己的路径 import {useWindowSize} from '@/utils/hooks/useWindowSize.js'; const {width， height} = useWindowSize(); js方式定义 // An highlighted block import { useState, useEffect } from 'react'; export const useWindowSize = () =&gt

react 表格高度自适应

weixin_45239190的博客

03-15

724

使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。一般用来设置流式布局宽高，当然，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。vh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;: 相对于视窗的宽度或高度中较大的那个。

【react踩坑】设置div宽度自适应

qq_33539213的博客

09-11

4468

场景：使用antd组件tabs左右滑动时，有些边上的标签会只显示一半，影响页面效果。现在需要每页只显示5个tab标签，每个tab标签宽度自适应。实现思路：监听包裹tabs的div组件的宽度变化，动态设置每个tabs的宽度为当前外部div宽度的1/5。方法一： const element = document.getElementsByClassName("ant-tabs-nav-scr...

react 控件怎么适应手机_React组件自适应窗口宽高

weixin_39732491的博客

02-11

695

很多时候我们需要组件能够根据窗口变化改变宽高，有时候可以使用css,有时候需要随数据调整则使用js计算。比如说，当我们在页面中放置一个iframe时，我们希望它的宽高随着其父元素or窗口的变化而变化；再比如说，当我们引用一个ant Table组件，并且动态传入columns及dataSource时，由于需要控制sroll值我们需要获得动态的width和height；......下面我们举几个栗子例...

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

08-29

React 根据宽度自适应高度的示例代码 React 是一个流行的前端框架，它提供了许多强大的功能来帮助开发者构建响应式的用户界面。在本文中，我们将探索如何使用 React 实现根据宽度自适应高度的示例代码。知识点 1:...

高度自适应窗口

03-27

而“工具”可能指的是开发者可以利用的各种库和框架，如jQuery、Angular、React等，它们提供了便利的API和方法来处理自适应窗口的问题。综上所述，高度自适应窗口是现代Web开发不可或缺的一部分，它通过灵活的设计...

react根据浏览器的尺寸动态调整布局

不积跬步，无以至千里；不积小流，无以成江海。

03-22

6493

react根据浏览器的尺寸动态调整div react实现关键代码 // 设置状态 state = { deskDivWidth：800px; deskHeight: document.body.clientHeight, } componentDidMount() { // 注册浏览器尺寸变化监听事件，刷新桌面尺寸 window.addEventListener('r...

react-reactdnr采用Reactjs构建的可拖动和可调整大小的窗口

08-15

react-dnr - 采用React.js构建的可拖动和可调整大小的窗口

react-ReactResized根据浏览器宽度返回不同的值

08-15

React Resized 根据浏览器宽度返回不同的值

react---大屏项目屏幕自适应组件---ScalePage

weixin_45180016的博客

08-04

948

react---大屏项目屏幕自适应组件

React 设置iframe自适应全屏

sirwsl

04-07

3708

React 设置Iframe宽高自适应全屏，iframe内嵌网页随屏幕进行缩放

React监听浏览器窗口大小的改变

w319502537的博客

04-13

7648

React监听浏览器窗口大小的改变

前端响应式/自适应/流动布局

fmk1023的博客

08-17

1417

文章目录响应式布局1. 控制视口（viewport）2. 媒体查询2.1 媒体类型2.2 媒体特征2.3 逻辑条件2.4 使用媒体查询设置断点3. 图片的自适应4 自适应图片等素材5 不使用绝对宽度6 相对大小的字体emremem和rem7 视口相对单位vh，vw8 流动布局9 选择加载CSS10 使用flex布局11 自适应布局响应式布局响应式网页设计的理念是让 Web 页面在不同尺寸的设备上和窗口上都能得到友好的渲染，以获得良好的浏览体验。响应式布局可自动调整并适应任何设备屏幕的大小，无论是 P

react 嵌套iframe_react 里面嵌套iframe高度自适应问题

weixin_39983350的博客

12-22

596

请教个问题，react里面引入iframe我需要等iframe里面的html页面全部加载完再去获取这个html的高度，期望的是在子iframe里面获取高度后调用父react里面的方法，该怎么写目前是这么写的但加载出来的iframe高度不正确，怀疑是onload拿到的是子iframe未渲染完的高度所以想在子iframe里面获取高度后调父react页面的方法来setState子iframe的高度id=...

结合antd layout做自适应的可见区高度

吞石鱼的博客

12-19

7951

目的: 当content组件高度不足一屏时，中间部分会塌陷，所以加minHeight让他不足一屏时自动占满一屏。 restHeight 是除了content的部分，比如header + footer的高度值。所以 minHeight: document.documentElement.clientHeight - restHeight 具体代码： import React from 'reac...

react hook 自适应高度

03-09

React Hook是React 16.8版本引入的一种新的特性，它可以让你在不编写类组件的情况下使用状态和其他React特性。而自适应高度是指根据内容的变化，动态地调整元素的高度。在React中实现自适应高度可以使用useState和useEffect这两个常用的Hook。首先，你可以使用useState来定义一个状态变量来保存元素的高度。然后，使用useEffect来监听内容的变化，并在内容变化时更新元素的高度。下面是一个示例代码，展示了如何使用React Hook实现自适应高度： ```jsx import React, { useState, useEffect } from 'react'; function AutoHeightComponent() { const [content, setContent] = useState(''); const [height, setHeight] = useState(0); useEffect(() => { // 监听内容变化 setHeight(document.getElementById('content').scrollHeight); }, [content]); return ( <div> <textarea id="content" value={content} onChange={(e) => setContent(e.target.value)} /> <div style={{ height: `${height}px`, overflow: 'auto' }}> {content} </div> </div> ); } ``` 在上面的代码中，我们使用useState定义了两个状态变量：content用于保存文本内容，height用于保存元素的高度。然后，使用useEffect监听content的变化，并在内容变化时更新元素的高度。在返回的JSX中，我们将textarea和展示内容的div放在一个父容器中，并设置div的高度为动态计算得到的height值。这样，当文本内容变化时，div的高度会自动调整以适应内容的变化。