React Bootstrap: динамически настраивать реквизиты на компоненте

Question

Из-за довольно сложного сценария я не буду объяснять, мне нужно будет динамически устанавливать опору для компонента React Bootstrap, когда пользователь инициирует триггер. Я думал примерно следующее:

<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> 
    ); 
}