He creado mi propio componente Popover react-bootstrap personalizado:

export default class MyPopover extends Component {
  // ...
  render() {
    return (
        <Popover {...this.props} >
           // ....
        </Popover>
    );
  }
}

El componente se representa así:

// ... my different class ...

  render() {

    const popoverExample = (
        <MyPopover id="my-first-popover" title="My Title">
          my text 
        </MyPopover >
    );

    return (
        <OverlayTrigger trigger="click" placement="top" overlay={popoverExample}>
          <Button>Click Me</Button>
        </OverlayTrigger>
    );
  }

Ahora, quiero agregar accesorios personalizados aMyPopover componente como ese: mi texto Y para usar los nuevos accesorios para configurar algunas cosas en el popover, por ejemplo:

    <Popover {...this.props} className={this.getClassName()}>
       {this.showTheRightText(this.props)}
    </Popover>

pero luego recibo esta advertencia en el navegador:

Advertencia: accesorios desconocidospopoverType en la etiqueta Retire estos accesorios del elemento.

Ahora, supongo que puedo eliminar el{...this.props} separe e inserte todos los accesorios originales uno por uno sin los accesorios personalizados, pero de esta manera pierdo el efecto de "desvanecimiento" y también es una forma fea de manejar este problema. ¿Hay una manera más fácil de hacerlo?