主页 / coding / 问题 / 79000174
Accepted
nullromo
Asked: 2024-09-19 05:12:48 +0800 CST

根据元素中不存在的字符串设置元素宽度

  • 772

我有一个可以渲染一个字符串或另一个字符串的 React 组件。

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

问题是当我使用这个并且打开renderB和关闭时，组件的宽度会根据渲染的字符串而改变。我希望组件宽度适合两个字符串中较长的一个。

我如何获取最大长度textA并textB使用它来确定组件的宽度？

例如，它可能看起来像这样：

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 个回答

  1. 您可以使用画布来测量文本的宽度。问题中的组件可以按如下方式填写：

    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>
    );
};

    缺点是您必须设置字体，这意味着您需要知道组件的字体。

    • 1
  2. Best Answer

    一种解决方案是使用网格布局，渲染两个子跨度，并隐藏不应渲染的跨度（使用visibility:hidden）。优点是这可以用纯 CSS 完成，而无需计算文本大小，这通常非常麻烦且有缺陷。但缺点当然是用户可以看到 DOM 树中的另一个子项，这可能并不理想，具体取决于您的用例。

    .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>

    代码示例

    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

相关问题