需求描述,一个嵌套了很多层div或者其他标签的内容框,而它的外层没有设置高度,或者使用百分比,而本容器需要设置高度来实现滚动,要么写死px高度,但是不能自适应,此时需要一个直系父容器(该容器要动态计算高度)包裹,这里的解决方法是,设计一个高阶方法,用于给本容器增加一个计算高度的父容器,并且超出高度隐藏内容。文章来源地址https://www.toymoban.com/news/detail-671275.html
// 自定义高阶函数
// customizeHeightWrap.tsx"
import React, { useEffect, useState } from 'react';
export const customizeHeightWrap = (MyComponent: React.ComponentType<any>, minusHeight?: number) => {
// MyComponent为需要包裹的组件,minusHeight为参照父组件高度需要减去的高度(得到要滚动的高度)
return function(props:any) {
const [customHeight, setCustomHeight] = useState(500);
useEffect(() => {
window.addEventListener('resize', () => getClientHeight());
getClientHeight();
return () => {
// 移除监听
window.removeEventListener('resize', getClientHeight);
};
}, [])
const getClientHeight = () => {
try {
const clientHeight = document.documentElement.clientHeight; // document.body.clientHeight
const setHeight = clientHeight - (minusHeight || 0)
setCustomHeight(setHeight);
} catch (error) {}
};
return (
<div className="customizeHeightWrap" style={{height: customHeight, overflowY: 'hidden'}}>
<MyComponent {...props} />
</div>
);
};
}
// ScrollComponent.tsx 需要设置滚动的容器
import React, { useEffect, useState } from 'react';
import type { FC } from 'react';
import { customizeHeightWrap } from "@/components/customizeHeightWrap.tsx"
interface IProps = {
xxx: string;
...
}
const ScrollComponent: FC<IProps> = (props) => {
return (
<div style={{height: '100%, overScrollY: 'scroll'}}>
超出高度滚动:这里100%参照父容器:高阶方法提供的包裹父组件
</div>
);
}
export default customizeHeightWrap(ScrollComponent);
文章来源:https://www.toymoban.com/news/detail-671275.html
到了这里,关于一个滚动框高度动态计算解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!