React Bootstrap：在组件上动态设置 props

Question

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

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

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

Answer 1

您可以将 placement 的当前值存储在父组件的状态中。您可以在组件的构造函数中指定一个初始值，并且可以通过在 onEnterFunc 函数中调用 setState 来更新该值。您更新后的 markup/render 函数将如下所示：

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

React Bootstrap：在组件上动态设置 props

React Bootstrap: set props on component dynamically

reactjs

react-bootstrap