如何将道具传递给Bootstrap OverlayTrigger覆盖组件？

Question

我创建了一个沙盒。https:/codesandbox.ioshappy-rgb-vks06?file=srcApp.js。

我试图将道具传递给SlotSettings组件，但我得到这个错误。

警告：函数组件不能被赋予引用。函数组件不能被赋予refs。试图访问这个 ref 将会失败。你是指使用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 值的原因。我上面发的东西对我的项目有用，希望对你入门有帮助。