Reactjs Render проблема на поповер с данными, полученными из BE

Question

Вот песочница для выпуска https://codesandbox.io/s/nice-cache-kl12v

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

Я рендерил его, используя Popover из дизайна antd, и при щелчке по нему он получит данные из BE и отобразит их.

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

Я пытался с атрибутом overflow-x: hidden скрыть полосу прокрутки, полоса прокрутки скрыта, но содержимое всплывающего окна не отображается. Пожалуйста, помогите!

Answer 1

Давайте определим функцию обратного вызова в родительском элементе InfiniteScrollExample как:

onInfiniteScrollUpdated = () => {
  this.setState({InfiniteScrollUpdate: this.state.InfiniteScrollUpdate + 1})
}

И давайте передадим этот метод как реквизит InfiniteScrollUpdate как:

<Popover
  placement="bottomLeft"
  title={text}
  content={<InfiniteScrollExample />}
  trigger="click"
  afterInfiniteScrollApiSuccess={this.onInfiniteScrollUpdated}
>
   <Button>Msgs</Button>
</Popover>

Ив InfiniteScrollExample вам придется вызывать эту опору после успешного вызова BE и обновления представления.Если вы сделаете вызов BE в componentDidMount, он будет выглядеть примерно так:

componentDidMount() {
  fetch(url).then(res => {
    this.setState({apiRes: res.data}, this.afterInfiniteScrollApiSuccess);
  })
}

Answer 2

Всплывающее окно позиционируется как «абсолютное», а слева - calc (100% - 40%)! Важный .

Вы можете сделать одну вещь. Дайте классу "ant-popover" CSS право: 0 . Затем он удалит горизонтальную прокрутку.