React组件如何基于两个字符串的最大宽度设置元素宽度

我有一个React组件，可根据renderB状态渲染textA或textB字符串，原代码如下：

const MyComponent = (props: {
    readonly textA: string;
    readonly textB: string;
    readonly renderB: boolean;
}) => {
    return <> {props.renderB ? props.textB : props.textA} </>;
};

问题是切换renderB状态时，组件宽度会随当前渲染的字符串长度变化，希望组件宽度固定适配textA和textB中较长的那个字符串。

实现思路 #

核心是先测量两个文本的宽度，取最大值作为组件容器的宽度。以下提供两种可行的实现方式：

方法一：通过隐藏DOM元素测量宽度

创建两个与显示文本样式一致的隐藏元素，渲染textA和textB后获取它们的实际宽度，再设置容器宽度：

import { useRef, useEffect, useState } from 'react';

const MyComponent = (props: {
    readonly textA: string;
    readonly textB: string;
    readonly renderB: boolean;
}) => {
    const [maxWidth, setMaxWidth] = useState(0);
    const textARef = useRef<HTMLSpanElement>(null);
    const textBRef = useRef<HTMLSpanElement>(null);

    useEffect(() => {
        const widthA = textARef.current?.offsetWidth || 0;
        const widthB = textBRef.current?.offsetWidth || 0;
        setMaxWidth(Math.max(widthA, widthB));
    }, [props.textA, props.textB]);

    return (
        <>
            {/* 隐藏的测量元素，必须与显示文本样式完全一致 */}
            <span 
                ref={textARef} 
                style={{ 
                    position: 'absolute', 
                    visibility: 'hidden', 
                    whiteSpace: 'nowrap',
                    fontFamily: 'inherit',
                    fontSize: 'inherit',
                    fontWeight: 'inherit'
                }}
            >
                {props.textA}
            </span>
            <span 
                ref={textBRef} 
                style={{ 
                    position: 'absolute', 
                    visibility: 'hidden', 
                    whiteSpace: 'nowrap',
                    fontFamily: 'inherit',
                    fontSize: 'inherit',
                    fontWeight: 'inherit'
                }}
            >
                {props.textB}
            </span>
            <div style={{ width: `${maxWidth}px`, whiteSpace: 'nowrap' }}>
                {props.renderB ? props.textB : props.textA}
            </div>
        </>
    );
};

注意：隐藏元素的样式（字体、字号、字重等）必须和显示文本完全匹配，否则测量的宽度会不准确。

方法二：通过Canvas API测量宽度

利用Canvas的measureText方法直接计算文本宽度，无需额外DOM元素：

import { useMemo } from 'react';

const MyComponent = (props: {
    readonly textA: string;
    readonly textB: string;
    readonly renderB: boolean;
}) => {
    const calculateTextWidth = (text: string) => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        if (!context) return 0;
        // 同步显示文本的字体样式，可根据实际情况调整
        context.font = window.getComputedStyle(document.body).font;
        return context.measureText(text).width;
    };

    const maxWidth = useMemo(() => {
        const widthA = calculateTextWidth(props.textA);
        const widthB = calculateTextWidth(props.textB);
        return Math.max(widthA, widthB);
    }, [props.textA, props.textB]);

    return (
        <div style={{ width: `${maxWidth}px`, whiteSpace: 'nowrap' }}>
            {props.renderB ? props.textB : props.textA}
        </div>
    );
};

注意：需要确保Canvas设置的字体样式与显示文本一致，否则计算出的宽度会有偏差。

两种方法对比 #

• DOM元素测量：精度更高，完全复用显示文本的样式，但需要额外创建隐藏DOM节点。
• Canvas API测量：更轻便，无需额外DOM元素，但需要手动同步字体样式，适配复杂样式时可能需要更多调整。

内容的提问来源于stack exchange，提问作者nullromo