2

我创建了一个沙箱：https ://codesandbox.io/s/happy-rgb-vks06?file=/src/App.js

我正在尝试将道具传递给 SlotSettings 组件，但出现此错误：

警告：不能给函数组件提供参考。尝试访问此 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."
  }
4

1 回答 1

2

我通过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。我在上面发布的内容适用于我的项目，希望这可以帮助您入门。

于 2020-05-02T01:18:39.650 回答