Сохранить ширину кнопки при загрузке React

Question

Мой компонент:

return (
            <button
                className={ _className }
                onClick={ this.handleButtonClick }
                onMouseDown={ this.switchActiveStyle }
                onMouseUp={ this.switchActiveStyle }
                onMouseOut={ this.outBtnMouse }
                style={style}
            >
                <span className={ styles["button__content"] }>
                    { loading ? <Loader
                        size={this.getSpinnerSize()}
                        className={styles['spinner__self']}
                    /> : <span
                        className={ styles["button__text"] }
                    >
                        { this.renderChildren() }
                    </span> }
                </span>
            </button>
        );

При состоянии loading: true, появляется спинер. Как мне сохранить ширину кнопки меняя текст кнопки на спинер?

Answer 1

Передавайте в компонент название кнопки, считайте количество символов = N и ставьте min-width: Npx.

Что-то вроде:

const MyButton = (name) => {
   return <button style={{minWidth: name.lenght+'rem'}}>...</button>
}

Конкретные значения minWidth уже сами обсчитаете с вычетом всех отступов.

БЛОГ НА HUSL

Сохранить ширину кнопки при загрузке React

Ответы (1 шт):