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

Question

Due to a rather elaborate scenario I won't explain, I need to be able to set the placement prop on a React Bootstrap component dynamically when the user initiates the trigger. I was thinking something like this:

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

Then in onEnterFunc somehow dynamically change the placement value. Anyone know if that's possible?

Answer 1

You can store the current value of placement in a parent component's state. You can specify an initial value in the component's constructor, and you can update this value by calling setState in your onEnterFunc function. Your updated markup/render function will look like this:

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