Representar un componente de React dentro de una ventana emergente de Bootstrap

Solución:

Bootstrap no facilita la renderización de un componente dinámico dentro de un popover. Si el popover que desea presentar es estático, simplemente puede usar React’s renderComponentToString que toma un componente y devuelve una cadena de HTML a través de una devolución de llamada:

var html = React.renderComponentToString(<MusicList />);
$(this.getDOMNode()).popover({
    html: true,
    content: html
});

Sin embargo, si su componente tiene alguna interactividad, esa estrategia no funcionará porque React nunca tiene la oportunidad de adjuntar controladores de eventos (o ejecutar ninguno de sus métodos de ciclo de vida personalizados). De hecho, Bootstrap no proporciona los ganchos adecuados para hacer que su contenido de popover sea dinámico.

---

Dicho esto, es posible hacer que esto funcione parcheando Bootstrap. Creé una demostración en vivo que tiene contenido dinámico de popover:

http://jsfiddle.net/spicyj/q6hj7/

Tenga en cuenta que la hora actual se representa dentro de la ventana emergente mediante un componente de React que se actualiza cada segundo.

---

¿Cómo se creó este popover?

Parche el popover de Bootstrap setContent método para tomar un componente React además de un HTML o una cadena de texto. En lugar de usar jQuery’s html o text métodos, yo uso React.renderComponent:

// Patch Bootstrap popover to take a React component instead of a
// plain HTML string
$.extend($.fn.popover.Constructor.DEFAULTS, {react: false});
var oldSetContent = $.fn.popover.Constructor.prototype.setContent;
$.fn.popover.Constructor.prototype.setContent = function() {
    if (!this.options.react) {
        return oldSetContent.call(this);
    }

    var $tip = this.tip();
    var title = this.getTitle();
    var content = this.getContent();

    $tip.removeClass('fade top bottom left right in');

    // If we've already rendered, there's no need to render again
    if (!$tip.find('.popover-content').html()) {
        // Render title, if any
        var $title = $tip.find('.popover-title');
        if (title) {
            React.renderComponent(title, $title[0]);
        } else {
            $title.hide();
        }

        React.renderComponent(content,  $tip.find('.popover-content')[0]);
    }
};

Ahora es posible que escribas

$(this.getDOMNode()).popover({
    react: true,
    content: <MusicList />
});

en tus componentDidMount y haga que se procese correctamente. Si mira en el JSFiddle vinculado, verá un propósito general <BsPopover /> El envoltorio que hice que se encarga de todas las llamadas de Bootstrap por usted, incluida la limpieza adecuada de los componentes del popover una vez que el componente del envoltorio se elimina del DOM.

Hay una nueva biblioteca llamada React-Bootstrap que está experimentando un rápido desarrollo.

https://react-bootstrap.github.io/components.html#popovers

Si incluye este módulo, tiene la capacidad de hacer que el popover sea su propio componente que puede guardar en una variable y luego usarlo en su función de renderizado.

Su ejemplo:

const positionerInstance = (
<ButtonToolbar>
<OverlayTrigger trigger="click" placement="bottom" overlay={<Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
<Button bsStyle="default">Click</Button>
</OverlayTrigger>
<OverlayTrigger trigger="hover" placement="bottom" overlay={<Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
<Button bsStyle="default">Hover</Button>
</OverlayTrigger>
<OverlayTrigger trigger="focus" placement="bottom" overlay={<Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
<Button bsStyle="default">Focus</Button>
</OverlayTrigger>
<OverlayTrigger trigger="click" rootClose placement="bottom" overlay={<Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
<Button bsStyle="default">Click + rootClose</Button>
</OverlayTrigger>
</ButtonToolbar>
);

React.render (positionerInstance, mountNode);

mi código:

showMoreDetails: función (obj, columnas) {

    var popOver = (
        <Popover>
            <table>
                {
                    columns.map(col =>
                            <tr>
                                <td style={{textAlign:'right', padding:5}}>
                                    {col.label}:&nbsp;
                                </td>
                                <td style={{padding:5}}>
                                    {obj[col.key]}
                                </td>
                            </tr>
                    )
                }
            </table>
        </Popover>
    );

    return(
        <OverlayTrigger trigger="click" rootClose placement="left" overlay={popOver}>
            <div className="popover-more">more...</div>
        </OverlayTrigger>
    );

},

---

---

Utiliza Nuestro Buscador