Question

我使用“react-bootstrap”定义并创建了popover。

import { Popover, ButtonToolbar, OverlayTrigger, Button } from "react-bootstrap";

和

const popoverClick = (
    <Popover id="popover-trigger-click" title="Popover bottom">
        <strong>TODO: </strong> Plan Info...
    </Popover>
);

并从渲染器调用它。

<OverlayTrigger trigger="click" placement="left" overlay={popoverClick}>
    <a href="#"> Plan</a>
</OverlayTrigger>

它适用于静态数据“TODO：Plan Info ...”但我想知道是否要在popover上显示我的数据如何传递该值？

P.S。 - ReactJs新手：）

谢谢， Faizan

Answer 1

overlay值可以是组件。你可以使用组件传递道具。

<强> PopoverComponent：

const PopoverComponent = ({myData})=>{

    return (<Popover id="popover-trigger-click" title="Popover bottom">
        <strong>{myData}</strong> Plan Info...
    </Popover>)
}

<强> OverlayTrigger：

<OverlayTrigger trigger="click" placement="left" overlay={<PopoverComponent myData={'sayHello'} />}>
    <a href="#"> Plan</a>
</OverlayTrigger>

如何将值传递给渲染器的弹出窗口

1 个答案: