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

Question

Я создал песочницу: 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."
  }

Answer 1

Я добился этого, используя 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значение по какой-то причине. То, что я опубликовал выше, работает для моего проекта, надеюсь, это поможет вам начать работу.

Answer 2

Вам нужно обернуть свой собственный поповер в React.forwardRef, таким образом вы получите доступ к ссылке, которую вы передаете в Popover:

      const CustomPopover = forwardRef(
  ({ customProp, ...props }, ref) => {
    return (
      <Popover ref={ref} {...props}>
        <Popover.Header as="h3">{customProp}</Popover.Header>
        <Popover.Body>
          And here's some <strong>amazing</strong> content. It's very engaging.
      right?
        </Popover.Body>
      </Popover>
    );
  }
);

Затем просто используйте OverlayTrigger с вашим пользовательским компонентом popover в оверлее, как обычно:

      <OverlayTrigger
  trigger="hover"
  placement="auto"
  overlay={<CustomPopover customProp={'custom value'} />}
>
  <button>hover me</button>
</OverlayTrigger>

Answer 3

      import React, { useState  ,useRef} from 'react';
import {  Popover, Overlay } from 'react-bootstrap';
const DemoComponent = () => {
const [show, setShow] = useState(false);
const target = useRef(null);
 return (
 <div className="">
  <span ref={target} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
    open tooltip
  </span>
  <Overlay target={target.current} show={show} placement="top">
    {(props) => (
      <Popover id="popover-basic" className="customize-tooltip"  {...props}>

        <Popover.Body>
          put here dyanamic content
        </Popover.Body>
      </Popover>
    )}
  </Overlay>
</div>
  );}

export default DemoComponent;