React Bootstrap：动态设置组件上的道具

Question

由于一个相当复杂的场景我不会解释，我需要能够在用户启动触发器时动态地在React Bootstrap组件上设置placement道具。我在想这样的事情：

<OverlayTrigger
    ref="trigger"
    onEnter={onEnterFunc}
    placement="bottom"
    overlay={<Popover>...</Popover>}>
   <span>html</span>
</OverlayTrigger>

然后在onEnterFunc中以某种方式动态更改放置值。任何人都知道这是否可能？

Answer 1

您可以将placement的当前值存储在父组件的状态中。您可以在组件的构造函数中指定初始值，也可以通过调用setState函数中的onEnterFunc来更新此值。您更新的标记/渲染功能如下所示：

render() {
    return (
       <OverlayTrigger
           ref="trigger"
           onEnter={() => this.onEnterFunc()}
           placement={this.state.placement}
           overlay={<Popover>...</Popover>}>
           <span>html</span>
        </OverlayTrigger>
    );
}