成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Ant Design Pro - 實(shí)踐React Hooks - 組件

twohappy / 2269人閱讀

摘要：另外，監(jiān)聽(tīng)事件，更新寬度狀態(tài)。文本真實(shí)寬度渲染完成后，通過(guò)獲取元素寬度。是否超長(zhǎng)比較文本真實(shí)寬度和組件的寬度。設(shè)置為其他狀態(tài)或中的狀態(tài)時(shí)，只在這些狀態(tài)變化時(shí)觸發(fā)注意，依賴為對(duì)象時(shí)，不會(huì)深比較。得益于的用法靈活，組件寫法上確實(shí)簡(jiǎn)潔不少。

需求

后臺(tái)項(xiàng)目，使用Ant Design Pro, 有這樣一個(gè)需求：有一個(gè)表格，寬度是自適應(yīng)的，表格中有一列是備注，文本長(zhǎng)度不定，我們希望在文本過(guò)長(zhǎng)的時(shí)候，使用省略樣式（ellipsis），同時(shí)鼠標(biāo)懸浮時(shí)有提示框展示完整文本。

設(shè)計(jì)

我計(jì)劃設(shè)計(jì)一個(gè)React Hooks組件，嵌在表格里面，實(shí)現(xiàn)文本的自適應(yīng)省略樣式。

單元格寬度

這一列我們只能使用相對(duì)寬度，因?yàn)檎麄€(gè)表格是自適應(yīng)寬度的，如果用固定寬度，可能在大屏上，這一列顯得很窄。

這里我用百分比，同時(shí)在頁(yè)面組件維護(hù)一個(gè)寬度狀態(tài)，在mounted之后，按百分比計(jì)算這一列的寬度并更新?tīng)顟B(tài)，如：clientWidth * 0.2。另外，監(jiān)聽(tīng)window resize事件，更新寬度狀態(tài)。

組件寬度

列寬計(jì)算出來(lái)之后，會(huì)通過(guò)props傳給組件，有了寬度，利用：text-overflow: ellipsis; 就可以實(shí)現(xiàn)動(dòng)態(tài)寬度的文本省略了。

提示框

這個(gè)提示框是在超長(zhǎng)時(shí)才有，不超長(zhǎng)時(shí)是沒(méi)有的。這個(gè)是比較麻煩的一點(diǎn)，因?yàn)槟阋喇?dāng)前是不是在超長(zhǎng)省略狀態(tài)，我們需要這個(gè)狀態(tài)來(lái)設(shè)置是否加提示框。

為了實(shí)現(xiàn)這個(gè)功能，我加了兩個(gè)Hooks狀態(tài)：是否超長(zhǎng)、文本真實(shí)寬度。

文本真實(shí)寬度：渲染完成后，通過(guò)dom獲取元素寬度。

是否超長(zhǎng)：比較文本真實(shí)寬度和組件的寬度。

實(shí)現(xiàn)

這里我就直接貼代碼了，在后面會(huì)理一下關(guān)鍵點(diǎn)。

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() )}
); } 關(guān)鍵點(diǎn)：

span的樣式，要設(shè)置為inline-block，方便取到文本寬度。

文本可能會(huì)更新，所以需要監(jiān)聽(tīng)children對(duì)象，變化時(shí)更新文本寬度、是否超長(zhǎng)。

組件寬度是根據(jù)props參數(shù)動(dòng)態(tài)適應(yīng)，所以也需要監(jiān)聽(tīng)，變化時(shí)要更新是否超長(zhǎng)的狀態(tài)。

總結(jié)

第二次使用React Hooks，確確實(shí)實(shí)感受到了好處。

userEffect的依賴設(shè)置非常靈活好用。

不設(shè)置，每次更新都會(huì)觸發(fā)。

設(shè)置為空，只在第一次加載時(shí)觸發(fā)。

設(shè)置為其他狀態(tài)、或props中的狀態(tài)時(shí)，只在這些狀態(tài)變化時(shí)觸發(fā)（*注意，依賴為對(duì)象時(shí)，不會(huì)深比較）。

得益于useState, useEffect的用法靈活，Hooks組件寫法上確實(shí)簡(jiǎn)潔不少。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106582.html

相關(guān)文章

  • Ant Design Pro - 實(shí)踐React Hooks - 頁(yè)面

    摘要：背景目前是社區(qū)最炙手可熱的新技術(shù)，我們準(zhǔn)備追一下熱度，在當(dāng)前的項(xiàng)目中實(shí)踐一下技術(shù)。我們的項(xiàng)目使用的腳手架是，初步想法是把現(xiàn)有的一個(gè)有狀態(tài)頁(yè)面組件重構(gòu)成函數(shù)組件。存放表單值的狀態(tài)是聲明在列表組件，傳給表單組件。 背景 React Hooks目前是React社區(qū)最炙手可熱的新技術(shù)，我們準(zhǔn)備追一下熱度，在當(dāng)前的項(xiàng)目中實(shí)踐一下Hooks技術(shù)。 我們的項(xiàng)目使用的腳手架是Ant Design P...

    wangbjun 評(píng)論0 收藏0

  • TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

    摘要：使用官方的的另外一種版本和一起使用自動(dòng)配置了一個(gè)項(xiàng)目支持。需要的依賴都在文件中。帶靜態(tài)類型檢驗(yàn)，現(xiàn)在的第三方包基本上源碼都是，方便查看調(diào)試。大型項(xiàng)目首選和結(jié)合，代碼調(diào)試維護(hù)起來(lái)極其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

    wangbinke 評(píng)論0 收藏0

  • TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

    摘要：使用官方的的另外一種版本和一起使用自動(dòng)配置了一個(gè)項(xiàng)目支持。需要的依賴都在文件中。帶靜態(tài)類型檢驗(yàn)，現(xiàn)在的第三方包基本上源碼都是，方便查看調(diào)試。大型項(xiàng)目首選和結(jié)合，代碼調(diào)試維護(hù)起來(lái)極其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

    codeKK 評(píng)論0 收藏0

  • 在react-control-center里玩轉(zhuǎn)無(wú)狀態(tài)組件

    摘要：類組件中的增加學(xué)習(xí)成本，類組件在基于現(xiàn)有工具的優(yōu)化上存在些許問(wèn)題。由于業(yè)務(wù)變動(dòng)，函數(shù)組件不得不改為類組件等等。那么可愛(ài)的各位看官，還不趕緊使用起來(lái)在線示例點(diǎn)我版本基礎(chǔ)入門項(xiàng)目錄像教程 視圖與業(yè)務(wù)，好一對(duì)冤家 業(yè)務(wù)型model model是需要精心的設(shè)計(jì)和合理的劃分的，這是我們之前開(kāi)發(fā)大型的redux+react單頁(yè)面應(yīng)用，大家都認(rèn)同的真理，同樣的，在react-control-cent...

    xiangzhihong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<