Copié y modifiqué un Popover de arranque de reacción de los ejemplos proporcionadosaquí , pero aún no funciona correctamente. El botón se representa correctamente, pero cuando hago clic en él para mostrar la ventana emergente, aparece un error que dice "El tipo de elemento no es válido: esperaba una cadena [...] o una clase/función [...] pero obtuve: indefinido. Usted probablemente se olvidó de exportar su componente [...]".

¿Alguien puede ver qué está causando este problema?

 import {Button, OverlayTrigger, Popover} from "react-bootstrap"; // ... renderColumnOptionsButton() { return ( <OverlayTrigger trigger="click" placement="left" overlay={ <Popover> <Popover.Header as="h3"> Choose which columns to display: </Popover.Header> <Popover.Body> options will go here </Popover.Body> </Popover> } > <Button variant="secondary">Column Options</Button> </OverlayTrigger> ); } // ... render() { // ... {this.props.allowColumnSelection && {this.renderColumnOptionsButton()} } // ... }

¡Gracias de antemano por tu ayuda!

EDITAR:

Eliminé el elemento Popover del accesorio de overlay y lo reemplacé con <text>hello</text> , y la superposición funcionó bien. Esto significa que el problema definitivamente proviene de entregar el elemento Popover al OverlayTrigger.

Me di cuenta de que Popover requiere un accesorio de identificación, pero cuando proporciono uno, WebStorm subraya la etiqueta y me dice que Type JSX.element is not assignable to type PropTypes.Requireable[...] .

Intenté quitar el Popover y colocarlo en una const, ambas con const popover = (...) y const popover = () => (...) , junto con <OverlayTrigger ... overlay={popover}> y ninguno de los dos funciona tampoco, pero ya no dan esa información sobre herramientas de WebStorm en el accesorio de id . Todavía lo tengo configurado con la última forma, y actualmente la línea overlay={popover} está subrayada y WebStorm nuevamente me dice que Type function is not assignable to type PropTypes.Requireable[...] .

Lo estoy haciendo como en los ejemplos, pero parece que al accesorio de overlay de OverlayTrigger no le gusta nada de lo que le doy. ¿Qué estoy haciendo mal?

EDITAR 2:

¡Me di cuenta del problema! De hecho, estoy usando react-bootstrap v4 y en lugar de <Popover.Header> y <Popover.Body> , usa <Popover.Title> y <Popover.Content> . Intercambiarlos solucionó el problema.