Как передать реквизиты в оверлейный компонент Bootstrap OverlayTrigger? - PullRequest
Новая
       18

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

1 голос
/ 20 апреля 2020

Я создал песочницу: https://codesandbox.io/s/happy-rgb-vks06?file= / src / App. js

Я пытаюсь передать реквизиты компоненту SlotSettings, но получаю эту ошибку:

Предупреждение: Функциональные компоненты не могут быть указаны как ссылки. Попытки получить доступ к этой ссылке потерпят неудачу. Вы хотели использовать React.forwardRef ()?

Я пытался читать как Bootstrap документы, так и документы React, но я не мог понять, как это должно работать. Это код, который я использую: 

  const SlotSettings = props => {
    console.log(props.hello); // this works
    return <Popover {...props} id="popover-basic">
      <Popover.Title as="h3">Popover right</Popover.Title>
      <Popover.Content>
        And here's some <strong>amazing</strong> content. It's very engaging.
        right?
      </Popover.Content>
    </Popover>
  }

  const getDaySlots = slots => {
    if (slots.length >= 1) {
      return slots.map(slot => {
        const variant = slot.status === "free" ? "success" : "secondary";

        const buttonRef = createRef();
        return (
          <OverlayTrigger
            key={uuid()}
            trigger="click"
            placement="bottom"
            overlay={<SlotSettings hello="hello" />}
            rootClose
          >
            <Button size="sm" ref={buttonRef} variant={variant} style={{ margin: "8px"}}>{slot.start}</Button>
          </OverlayTrigger>
        )
      });  
    }
    return "No lessons available."
  }

1 Ответ

0 голосов
/ 02 мая 2020

Я достиг этого, используя свойство popperConfig OverlayTrigger. PopperConfig используется для передачи и объекта нижележащему экземпляру popper. ссылка на документы

Простой пример: 

function renderTooltip(props) {
    let message = ""

    //Sometimes, props.popper.state is undefined. 
    //It runs this function enough times that state gets a value 
    if (props.popper.state) {
        message = props.popper.state.options.testObj
    }

    return (
        <Tooltip id="button-tooltip" {...props}>
            {message}
        </Tooltip>
    );
}

function getDaySlots(slots) {
    //Other stuff
    return (
        <OverlayTrigger
            placement="right"
            delay={{ show: 250, hide: 400 }}
            overlay={renderTooltip}
            popperConfig={{testObj:"hello there"}}
        >
            <Button variant="success">Click here</Button>
        </OverlayTrigger >
    );
}

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

...