Встроенное всплывающее окно / всплывающая подсказка в React Semantic UI - PullRequest
Новая
       6

Встроенное всплывающее окно / всплывающая подсказка в React Semantic UI

0 голосов
/ 04 июля 2018

Я следую примеру из официальной документации для создания простого всплывающего окна: https://react.semantic -ui.com / modules / popup

Так вот мой текущий код, который работает очень хорошо: 

export default (state, methods) => {
  const { trigger, handleTooltipOpen, handleTooltipClose } = methods;

  return (
    <Popup className={ `tooltip ${ state.className }` } trigger={ trigger } open={ state.tooltipShown }
      onOpen={ handleTooltipOpen } onClose={ handleTooltipClose }
      on="hover" hideOnScroll>
        <p>Popup Text</p>
    </Popup>
  );
};

Но по умолчанию он добавляет всплывающее окно к концу <body> (что меня очень смущает). Есть ли способ, как указать, куда именно добавить всплывающее окно, или какой-то вариант inline?

P.S. Я добавил ссылку в «песочницу» , где вы можете повторить проблему - просто откройте ее в адаптивном мобильном режиме и нажмите.

1 Ответ

0 голосов
/ 09 июля 2018

Компонент Popup фактически использует компонент Portal, чтобы отобразить его на портале и в другом дереве React. Это означает, что все реквизиты, доступные для Portal компонента , также доступны для Popup. Если вы не хотите, чтобы ваш всплывающий портал монтировался на <body>, вы можете указать mountNode реквизит на вашем Popup, который будет монтировать его в другом месте.

...