資訊專欄INFORMATION COLUMN
摘要：另外，監聽事件，更新寬度狀態。文本真實寬度渲染完成后，通過獲取元素寬度。是否超長比較文本真實寬度和組件的寬度。設置為其他狀態或中的狀態時，只在這些狀態變化時觸發注意，依賴為對象時，不會深比較。得益于的用法靈活，組件寫法上確實簡潔不少。
需求
后臺項目，使用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組件寫法上確實簡潔不少。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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...
閱讀 4149·2021-09-22 15:34
閱讀 2764·2021-09-22 15:29
閱讀 490·2019-08-29 13:52
閱讀 3351·2019-08-29 11:30
閱讀 2259·2019-08-26 10:40
閱讀 831·2019-08-26 10:19
閱讀 2255·2019-08-23 18:16
閱讀 2311·2019-08-23 17:50
