Saltar al contenido

Cómo hacer que un componente reaccione dentro de un Bootstrap Popover

Supongamos que tienes un proyecto estático estándar sin modulador ni transpondedor, sólo archivos HTML muy básicos que están enlazados a través de varias páginas.

Tendrás el enlace CSS de Bootstrap en la cabeza, y el script jQuery, Popper.js y Bootstrap justo antes de que el cuerpo termine. La plantilla básica de HTML se vería como sigue.

Cómo hacer que un componente reaccione dentro de un Bootstrap Popover
Cómo hacer que un componente reaccione dentro de un Bootstrap Popover
12345678910111213141516171819202122232425262728293031323334<!DOCTYPE html;<htmllang="en"<head;<metacharset="UTF-8"/;metaname="viewport "content="width="width=device-width, initial-scale=1. 0"/;metahttp-equiv="X-UA-Compatible "content="ie=edge"/;title="Plantilla estática</title=; linkintegrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO "crossorigin="anonymous"/NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO;! -- -- -- -- -- Scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min. js "integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo "crossorigin="anonymous"<</script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min. js "integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 "crossorigin="anonymous"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4. 1.3/js/bootstrap.min.js "integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy "crossorigin="anonymous"</script></body></html>

html

Añade el Botón Popover

Crea un botón que dispare el popover. Dale una identificación de valor a la ventana emergente.

123<buttontype="button"> Click para conmutar popover</button
html

Antes de que el cuerpo termine, escribe un bloque e inicia el popover seleccionando el id del botón.

12345<script;$(documento).ready(function(){$("button#popover").popover();});</script;

html

Si lo desea, pase algunas opciones en el popover() para mostrar el contenido HTML en él.

1234567// ..$("button#popover").popover({ html:true, content:`<div>Hello</div>`});// ..

js

Puedes ver el popover en acción cuando haces clic en el botón.

Ahora, en lugar de poner directamente el contenido, añadirá un componente de React.

Insertar el componente de reacción

Primero, agregue los enlaces de React CDN al archivo HTML.

12345678&lt;scriptcrossoriginsrc="https://unpkg.com/[email protected]/umd/react-dom.development.js"<;/script
html

Como no hay moduladores o transpiladores, tendrás que usar la función React.createElement() para crear un componente en lugar de escribir JSX.

1constHello=props==;React.createElement("div",null,`Hello ${props.to}!`);

js

Ahora, ¿dónde se presta este componente? Oh, es simple, puedes hacer lo siguiente, ¿verdad?

123456789101112$(document).ready(function(){$("button#popover").popover({ html:true, content:`&lt;div id=$0027app$0027&gt;&lt;/div&gt;`});constHello=props=={i};Reaccionar. createElement("div",null,`Hello ${props.to}!`);ReactDOM.render(React.createElement(Hello,{ to: "World"},null),document.getElementById("app"));});

js

Desafortunadamente, esto no funcionará porque el popover se inicializa y el contenido HTML dentro del popover es añadido por jQuery. Por lo tanto, el método ReactDOM.render() no podrá encontrar el nodo DOM.

Para evitar este problema, crea un elemento DOM y luego accede a su propiedad innerHTML dentro del contenido popover.

123456789101112$(documento).ready(function(){const a =documento.createElement("div");constHello=props=&gt;React.createElement("div",null,`Hello ${props. to}!`);ReactDOM.render(React.createElement(Hello,{ to: "World"},null), a);$("button#popover").popover({ html:true, content: a.innerHTML});});

js

Si quieres mostrar un componente estático, entonces esto funcionará para ti. Pero si necesitas interactividad dentro del popover, eso es algo que no es posible con Bootstrap actualmente. Bootstrap no tiene los ganchos adecuados para facilitar el comportamiento interactivo.

Pero si se tratara de un proyecto combinado con un transpondedor, podríamos usar la biblioteca reactstrap para añadir interactividad dentro del componente popover.