Início / coding / Perguntas / 79000174
Accepted
nullromo
Asked: 2024-09-19 05:12:48 +0800 CST

Definir largura do elemento com base em uma string que não está no elemento

  • 772

Tenho um componente React que pode renderizar uma string ou outra.

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

O problema é que quando eu uso isso e alterno entre renderBligado e desligado, a largura do componente pode mudar com base em qual string é renderizada. Quero que a largura do componente se ajuste à maior das duas strings.

Como posso pegar o comprimento máximo de textAe textBe usá-lo para determinar a largura do meu componente?

Por exemplo, poderia ser algo como isto:

const MyComponent = (props: {
    readonly textA: string;
    readonly textB: string;
    readonly renderB: boolean;
}) => {
    const widthA = /* compute the width of props.textA */;
    const widthB = /* compute the width of props.textB */;

    return (
        <div style={{ width: `${Math.max(widthA, widthB)}px` }}>
            {props.renderB ? props.textB : props.textA}
        </div>
    );
};
javascript

2 respostas

  1. Você pode usar uma tela para medir a largura do texto. O componente da pergunta pode ser preenchido da seguinte forma:

    const MyComponent = (props: {
    readonly textA: string;
    readonly textB: string;
    readonly renderB: boolean;
}) => {
    const maxWidth = (() => {
        const context = document.createElement('canvas').getContext('2d');
        if (context) {
            context.font = '16px Roboto';
        }
        return Math.round(
            Math.max(
                context?.measureText(props.textA).width ?? 0,
                context?.measureText(props.textB).width ?? 0,
            ),
        );
    })();

    return (
        <span
            style={{
                display: 'inline-block',
                width: `${maxWidth}px`,
            }}
        >
            {props.renderB ? props.textB : props.textA}
        </span>
    );
};

    A desvantagem é que você precisa definir a fonte, o que significa que você precisa saber a fonte do componente.

    • 1
  2. Best Answer

    Uma solução é usar o layout de grade, renderizar ambos os spans filhos e ocultar o que não deve ser renderizado (usando visibility:hidden). A vantagem é que isso pode ser feito com CSS puro sem precisar calcular o tamanho do texto, o que geralmente é bem problemático e cheio de bugs. Mas a desvantagem é que, claro, o usuário pode ver o outro filho na árvore DOM, o que pode não ser o ideal dependendo do seu caso de uso.

    .wrapper {
  display: inline-grid;
  border: 1px solid red; /* for showing the size*/
}

.wrapper>span {
  grid-column: 1;
  grid-row: 1;
  text-wrap: nowrap;
}

.wrapper>span:not(.rendered) {
  visibility: hidden;
}
    <span class="wrapper"> 
  <span>Short Text</span>
  <span class="rendered">Example 1. Long text I'm very long</span>
</span>
<span class="wrapper"> 
  <span class="rendered">Example 2. Short Text</span>
  <span>Very Long textttttttttttttttttttttttttttttttttttt</span>
</span>

    Exemplo de código

    const MyComponent = (props: {
    readonly textA: string;
    readonly textB: string;
    readonly renderB: boolean;
}) => {
    return (
        <span style={{ display: 'inline-grid' }}>
            <span
                style={{
                    gridColumn: 1,
                    gridRow: 1,
                    visibility: props.renderB ? 'hidden' : 'visible',
                }}
            >
                {props.textA}
            </span>
            <span
                style={{
                    gridColumn: 1,
                    gridRow: 1,
                    visibility: props.renderB ? 'visible' : 'hidden',
                }}
            >
                {props.textB}
            </span>
        </span>
    );
};
    • 1

relate perguntas