React实现多标签在有限空间内展示

const calculateLength = (rowNums: number[], rowCount: number, rowMaxValue: number) => {
    let count = 0; // 统计数字数量
    let currRow = 0; // 当前行数
    let currSum = 0; // 当前行的累加和

    for (let i = 0; i < rowNums.length; i++) {
        // 当前值大于最大值，停止
        if (rowNums[i] > rowMaxValue) {
            break;
        }
        // 如果加入下一个数字后超出最大值，重新开始计算
        if (currSum + rowNums[i] > rowMaxValue) {
            currRow++;
            currSum = 0;
        }
        // 如果行数超过设定的行数，停止统计
        if (currRow >= rowCount) {
            break;
        }
        // 更新当前行的累加和
        currSum += rowNums[i];
        // 统计数字数量
        count++;
    }
    return count;
};

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

const containerWidth = ref.current.clientWidth

const tagChildren = ref.current.children;

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