場景

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

思路

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

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

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

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

項目中的實(shí)現(xiàn)

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

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

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

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

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

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

基于 ref 即可獲行最大值，即標(biāo)簽父級 Dom 的寬度

const containerWidth = ref.current.clientWidth

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

const tagChildren = ref.current.children;

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

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

最后

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

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

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

最新評論