場景

在業(yè)務中，需要在一個卡片組件中展示多個標簽，標簽組件高度相同，寬度和出現(xiàn)順序不同，要求標簽只能在有限的空間內(nèi)展示（比如滿足放入兩行標簽的空間），并在滿足最大展示數(shù)量的情況下，對超出部分進行隱藏，然后通過鼠標 hover 的方式展示隱藏內(nèi)容

思路

標簽的高度相同，空間內(nèi)可支持的標簽行數(shù)固定，多標簽的內(nèi)容可以轉(zhuǎn)化為一個數(shù)組數(shù)據(jù)，所以可把問題概括為：獲取在給定的行數(shù)內(nèi)，按順序放入的不同寬度標簽的最大數(shù)量，則余下的內(nèi)容為需要隱藏的標簽內(nèi)容

有明確的輸入輸出，可以再進一步轉(zhuǎn)化為一個算法問題：給定一個數(shù)字數(shù)組、限制的行數(shù)和行最大值，將數(shù)組中的數(shù)字依次放入行中并相加，相加的值不能超過行最大值，如果加入下一個數(shù)字后超出最大值，則該行不再計入該數(shù)字，并在下一行重新開始放入計算，如果超出行數(shù)，則停止，最后統(tǒng)計可以放入給定行中的最大數(shù)字數(shù)量

const calculateLength = (rowNums: number[], rowCount: number, rowMaxValue: number) => {
    let count = 0; // 統(tǒng)計數(shù)字數(shù)量
    let currRow = 0; // 當前行數(shù)
    let currSum = 0; // 當前行的累加和

    for (let i = 0; i < rowNums.length; i++) {
        // 當前值大于最大值，停止
        if (rowNums[i] > rowMaxValue) {
            break;
        }
        // 如果加入下一個數(shù)字后超出最大值，重新開始計算
        if (currSum + rowNums[i] > rowMaxValue) {
            currRow++;
            currSum = 0;
        }
        // 如果行數(shù)超過設定的行數(shù)，停止統(tǒng)計
        if (currRow >= rowCount) {
            break;
        }
        // 更新當前行的累加和
        currSum += rowNums[i];
        // 統(tǒng)計數(shù)字數(shù)量
        count++;
    }
    return count;
};

項目中的實現(xiàn)

在明確思路后的，在項目中的實現(xiàn)只需要準備好算法中的需要的參數(shù)，再代入使用即可

需要獲取的內(nèi)容有：

• 標簽寬度數(shù)組
• 行最大值
• 行數(shù)：行數(shù)是基于設計稿限制的，可以直接使用常量定義

標簽寬度數(shù)組、行最大值獲取

標簽寬度數(shù)組的獲取似乎有點矛盾，既要隱藏超出的標簽，但又需要標簽渲染為實際的 Dom 后才可以獲取其寬度。這里直接采用比較粗暴的方式，使用絕對定位，脫離文檔流全量渲染標簽內(nèi)容并隱藏，只用于獲取標簽的寬度

<div>
	{renderTag()}
	<div ref={ref} style={{ positions: 'absolute', opacity: 0 }}> 
	    {renderAllTag()}
	</div>
</div>

基于 ref 即可獲行最大值，即標簽父級 Dom 的寬度

const containerWidth = ref.current.clientWidth

在基于該 Dom 的 children 內(nèi)容，獲取標簽的寬度數(shù)組

const tagChildren = ref.current.children;

const itemWidthList = Array.from(tagsChildren).map(item => item.clientWidth)

最后帶入上述 calculateLength 方法，計算出實際需要渲染的最大數(shù)量，并對后端返回的標簽數(shù)據(jù)進行分割處理

最后

實現(xiàn)時還有一些需要注意的點：

• 計算中，當單個標簽的寬度大于行最大寬度的時候，需要直接返回
• 計算出可以放入給定行中的最大數(shù)量后，還需要考慮給展示隱藏數(shù)量的 Dom 留空間，可以在計算結(jié)果的基礎上，再減 1或減 2

以上就是React實現(xiàn)多標簽在有限空間內(nèi)展示的詳細內(nèi)容，更多關于React多標簽展示的資料請關注腳本之家其它相關文章！

最新評論