Открытие всплывающего окна Antd в двух разных значениях ширины в зависимости от порядка выполнения действий

Question

извините, если название сбивает с толку, я не знаю, как еще выразить его словами.

Я сейчас учусь реагировать и сделал это приложение используя компоненты пользовательского интерфейса . У меня есть эта функция, где я могу добавлять и удалять элементы в корзину.

Я использую всплывающее окно, чтобы вывести список элементов корзины после их добавления в корзину. Всплывающее окно открывается в двух разных значениях ширины в зависимости от порядка выполнения действий в приложении.

Если я открываю корзину, прежде чем добавлять что-либо в корзину, корзина открывается в узком контейнере без содержимого в корзине. и если я добавлю что-нибудь в корзину после этого. тогда корзина остается узкой и не подходит всем.

теперь перезагрузите страницу

добавить элементы в корзину перед открытием поповера. теперь вы можете видеть, что поповер шире и может соответствовать всем контекстам.

Как я могу решить эту проблему?

Воспроизводимый пример: Код Ссылка песочницы

github: https://github.com/nijeesh4all/reactShopping

Answer 1

Благодаря u / jnforja на reddit.

<Popover      
placement="bottom"      
title="YOUR CART"      
content={listContent}      
trigger="click"      
key={this.boughtItems() > 0}>

смена ключа после добавления предметов в поповер, похоже, решает проблему.

На мой взгляд, происходящее следует рассматривать как ошибку в компоненте popover. Перед первым кликом по корзине поп-элемент не существует в DOM. После первого щелчка пользователя, элемент popover DOM будет создан и размещен на экране с учетом текущих размеров контента. Созданный элемент DOM будет использоваться повторно, даже если содержимое изменяется. Однако при изменении содержимого размеры и расположение не корректно пересчитываются (причина, по которой я не уверен). Поэтому, когда мы меняем пустой список на список, содержащий хотя бы один элемент, мы видим результат.

Одним из решений этой проблемы является указание React не использовать повторно элемент dom, который у него есть. создано. Мы можем сделать это через атрибут ключа. Поскольку из того, что я видел, мы можем повторно использовать элемент popover dom для ситуаций, когда у нас есть 1 или более элементов, я сделал ключ popover таким же в этих ситуациях. Таким образом, выражение this.boughtItems() > 0

Если вы хотите узнать больше о свойстве ключа, вы можете прочитать эту часть документации React .

Это самореклама , но эта статья Я писал об использовании атрибута ключа для анимации изображений при изменении, а также может помочь вам понять, как работает этот атрибут ключа.