浅析react里面如何封装一个通用的Ellipsis组件
作者：sensFeng
这篇文章主要为大家详细介绍了在react里面如何封装一个通用的Ellipsis组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
背景
在平时的业务场景中，为了提升用户体验，经常会使用固定宽度，超出显示...的css样式。但是每次都写一次，比较麻烦，为了更好的摸鱼，所以把Ellipsis组件抽离出来。
先捋一下要实现的功能：
- 固定宽度，超出显示...
- 鼠标
hover上去，能看到全部 - 支持多行显示...
- 考虑
resize场景
思路
计算要渲染文字的宽度，如果宽度超出，就显示...
这里的问题是，如何计算文字的宽度呢？
- 可以先把文字在看不见的地方先渲染出来，获取到实际宽度，然后再去比较
- 直接给容器设置
overflow:hidden，然后比较scrollWidth跟clientWidth的值
这里我用的是第二种。
import React, { FC, useCallback, useLayoutEffect, useRef, useState } from 'react';
import { Tooltip } from 'antd';
import debounce from 'lodash/debounce';
import useDimensions from 'react-cool-dimensions';
import { TooltipProps } from 'antd/lib';
interface EllipsisProps {
line?: number
style?: React.CSSProperties
children?: React.ReactElement
}
const Ellipsis: FC<EllipsisProps & TooltipProps> = (props) => {
const {
children,
line = 1,
style: currentStyle = {},
...other
} = props;
const wrapper = useRef<HTMLElement>();
const [showPopover, setShowPopover] = useState(false);
// 先设置overflow: 'hidden', 这样超出了才能进行比较
const defaultStyle: React.CSSProperties = line === 1 ? {
display: 'block',
maxWidth: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
...currentStyle
} : {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: line,
...currentStyle
}
const validShowPopover = () => {
// 当line为1的时候，比较width
// 否则，比较height
const {
scrollWidth = 0,
clientWidth = 0,
scrollHeight = 0,
clientHeight = 0
} = wrapper.current as HTMLElement || {};
setShowPopover(scrollWidth > clientWidth || scrollHeight > clientHeight)
}
const debounceMesaure = useCallback(debounce(() => {
validShowPopover();
}, 200), [validShowPopover]);
// 支持resize
const { observe } = useDimensions({
onResize: debounceMesaure,
});
useEffect(() => {
validShowPopover();
}, []);
const renderChildren = () => {
return React.cloneElement(children, {
style: defaultStyle,
ref: (element: HTMLElement | undefined) => {
observe(element);
wrapper.current = element;
},
})
}
// 基于ant的Tooltip组件
if (showPopover) {
return <Tooltip {...other}>{renderChildren()}</Tooltip>
}
return renderChildren();
}
export default Ellipsis
使用
Ellipsis组件的children必须是一个html元素标签
如果要渲染的元素没有给定宽度的话，需要手动向Ellipsis组件传一个width参数
import Ellipsis from './Ellipsis';
const EllipsisPage = () => {
return <div>
<Ellipsis style={{ width: 200 }} title={text} line={2}>
<span>{text}</span>
</Ellipsis>
</div>
}
export default EllipsisPage;
如果要渲染的元素已经有指定的宽度，则不需要
import Ellipsis from './Ellipsis';
const EllipsisPage = () => {
return <div>
<div style={{ width: 200 }}>
<Ellipsis title={text} line={1}>
<span>{text}</span>
</Ellipsis>
</div>
</div>
}
export default EllipsisPage;
到此这篇关于浅析react里面如何封装一个通用的Ellipsis组件的文章就介绍到这了,更多相关react封装Ellipsis组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！