摘要：另外，监听事件，更新宽度状态。文本真实宽度渲染完成后，通过获取元素宽度。是否超长比较文本真实宽度和组件的宽度。设置为其他状态或中的状态时，只在这些状态变化时触发注意，依赖为对象时，不会深比较。得益于的用法灵活，组件写法上确实简洁不少。
需求
后台项目，使用Ant Design Pro, 有这样一个需求：有一个表格，宽度是自适应的，表格中有一列是备注，文本长度不定，我们希望在文本过长的时候，使用省略样式（ellipsis），同时鼠标悬浮时有提示框展示完整文本。
设计我计划设计一个React Hooks组件，嵌在表格里面，实现文本的自适应省略样式。
单元格宽度这一列我们只能使用相对宽度，因为整个表格是自适应宽度的，如果用固定宽度，可能在大屏上，这一列显得很窄。
这里我用百分比，同时在页面组件维护一个宽度状态，在mounted之后，按百分比计算这一列的宽度并更新状态，如：clientWidth * 0.2。另外，监听window resize事件，更新宽度状态。
组件宽度列宽计算出来之后，会通过props传给组件，有了宽度，利用：text-overflow: ellipsis; 就可以实现动态宽度的文本省略了。
提示框这个提示框是在超长时才有，不超长时是没有的。这个是比较麻烦的一点，因为你要知道当前是不是在超长省略状态，我们需要这个状态来设置是否加提示框。
为了实现这个功能，我加了两个Hooks状态：是否超长、文本真实宽度。
文本真实宽度：渲染完成后，通过dom获取元素宽度。
是否超长：比较文本真实宽度和组件的宽度。
实现这里我就直接贴代码了，在后面会理一下关键点。
export default function LineEllipsis(props) {
const { children, width = "200px", ...restProps } = props;
const [textWidth, setTextWidth] = useState(0);
const [isOverflow, setIsOverflow] = useState(false);
const textRef = useRef(null);
const textStyles = {
width,
display: "inline-block",
overflow: "hidden",
wordWrap: "nowrap",
textOverflow: "ellipsis",
};
useEffect(
() => {
if (textRef) {
const { current } = textRef;
const clientWidth = current.clientWidth;
setTextWidth(clientWidth);
if (!isOverflow && clientWidth > parseInt(width)) {
setIsOverflow(true);
} else if (isOverflow && clientWidth < parseInt(width)) {
setIsOverflow(false);
}
}
},
[children]
);
useEffect(
() => {
if (textRef && textWidth > 0) {
if (!isOverflow && textWidth > parseInt(width)) {
setIsOverflow(true);
} else if (isOverflow && textWidth < parseInt(width)) {
setIsOverflow(false);
}
}
},
[width]
);
const textRender = () => {
return (
{children}
);
};
return (
{isOverflow ? (
{children}}>{textRender()}
) : (
textRender()
)}
);
}
关键点：
span的样式，要设置为inline-block，方便取到文本宽度。
文本可能会更新，所以需要监听children对象，变化时更新文本宽度、是否超长。
组件宽度是根据props参数动态适应，所以也需要监听，变化时要更新是否超长的状态。
总结第二次使用React Hooks，确确实实感受到了好处。
userEffect的依赖设置非常灵活好用。
不设置，每次更新都会触发。
设置为空，只在第一次加载时触发。
设置为其他状态、或props中的状态时，只在这些状态变化时触发（*注意，依赖为对象时，不会深比较）。
得益于useState, useEffect的用法灵活，Hooks组件写法上确实简洁不少。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106582.html
摘要：背景目前是社区最炙手可热的新技术，我们准备追一下热度，在当前的项目中实践一下技术。我们的项目使用的脚手架是，初步想法是把现有的一个有状态页面组件重构成函数组件。存放表单值的状态是声明在列表组件，传给表单组件。 背景 React Hooks目前是React社区最炙手可热的新技术，我们准备追一下热度，在当前的项目中实践一下Hooks技术。 我们的项目使用的脚手架是Ant Design P...
摘要：使用官方的的另外一种版本和一起使用自动配置了一个项目支持。需要的依赖都在文件中。带静态类型检验，现在的第三方包基本上源码都是，方便查看调试。大型项目首选和结合，代码调试维护起来极其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...
摘要：使用官方的的另外一种版本和一起使用自动配置了一个项目支持。需要的依赖都在文件中。带静态类型检验，现在的第三方包基本上源码都是，方便查看调试。大型项目首选和结合，代码调试维护起来极其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...
摘要：类组件中的增加学习成本，类组件在基于现有工具的优化上存在些许问题。由于业务变动，函数组件不得不改为类组件等等。那么可爱的各位看官，还不赶紧使用起来在线示例点我版本基础入门项目录像教程 视图与业务，好一对冤家 业务型model model是需要精心的设计和合理的划分的，这是我们之前开发大型的redux+react单页面应用，大家都认同的真理，同样的，在react-control-cent...
阅读 4147·2021-09-22 15:34
阅读 2763·2021-09-22 15:29
阅读 488·2019-08-29 13:52
阅读 3349·2019-08-29 11:30
阅读 2257·2019-08-26 10:40
阅读 830·2019-08-26 10:19
阅读 2255·2019-08-23 18:16
阅读 2309·2019-08-23 17:50
