Как использовать реактивный поппер с рендером - PullRequest
Новая
       28

Как использовать реактивный поппер с рендером

0 голосов
/ 28 марта 2019

Я новичок, пытаюсь понять react-popper.На их github это пример кода: 

import { Manager, Reference, Popper } from 'react-popper';

const Example = () => (
  <Manager>
    <Reference>
      {({ ref }) => (
        <button type="button" ref={ref}>
          Reference element
        </button>
      )}
    </Reference>
    <Popper placement="right">
      {({ ref, style, placement, arrowProps }) => (
        <div ref={ref} style={style} data-placement={placement}>
          Popper element
          <div ref={arrowProps.ref} style={arrowProps.style} />
        </div>
      )}
    </Popper>
  </Manager>
);

Это в том виде, в каком оно там стоит должно работать?Я не уверен, что понимаю, как я мог бы использовать этот код, как бы он выглядел, если бы я импортировал / использовал этот Example компонент в свой собственный родительский компонент;Я должен был бы передать refs?Как так?Было бы здорово, если бы кто-нибудь дал мне рабочий пример этого кода, я просто хотел бы посмотреть, как его использовать.

Ответы [ 2 ]

2 голосов
/ 28 марта 2019

Не беспокойтесь о рендере.В большинстве случаев вам не нужно изменять их.

Просто имейте в виду, что

  • ref рендер из Reference должен быть прикреплен к контрольному элементу (ваш предмет, к которому прикреплен ваш поппер).
  • ref рендер-реквизит из Popper должен быть прикреплен на поппер (твоя подсказка или что-то еще).

style и placement рендер-реквизит для географического положения на странице,

В резюме в этом примере будет отображаться кнопка со стрелкой <div>, которая содержит "Popper element".

0 голосов
/ 29 марта 2019

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

Имейте в виду, что реакция-поппер имеет низкий уровень API. Это позиционный движок, а не библиотека всплывающих подсказок. Используя его, вы должны будете реализовать логику отображения Поппера самостоятельно. Например, вы можете иметь переменную shouldShowElement и вызвать изменения для этого 

  ...
  <Manager>
    <Reference>
      {({ ref }) => (
        <button
          type="button"
          ref={ref}
          onMouseEnter={() => {
            /* [[SOME CODE TO SET shouldShowElement TO TRUE]] */
          }}
          onMouseLeave={() => {
            /* [[SOME CODE TO SET shouldShowElement TO FALSE]] */
          }}
        >
          Reference element
        </button>
      )}
    </Reference>
    {shouldShowElement ? (
      <Popper placement="right">
        {({ ref, style, placement, arrowProps }) => (
          <div ref={ref} style={style} data-placement={placement}>
            Popper element
            <div ref={arrowProps.ref} style={arrowProps.style} />
          </div>
        )}
      </Popper>
    ) : null}
  </Manager>
  ...

Если вам нужен более высокоуровневый API, вы можете использовать Reaction-tippy или Вспомогательная всплывающая подсказка

...