javascript - sirve - ¿Cómo crear un Modal de Reacción(que se agrega a `<cuerpo>`) con transiciones?
modal dentro de otro modal bootstrap (8)
React 16 ahora tiene portals incorporados. Probablemente deberías usar that lugar.
Aquí hay una versión ES6 del método descrito en este artículo :
import React from ''react'';
import ReactDOM from ''react-dom'';
import PropTypes from ''prop-types'';
export default class BodyEnd extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
};
componentDidMount() {
this._popup = document.createElement(''div'');
document.body.appendChild(this._popup);
this._render();
}
componentDidUpdate() {
this._render();
}
componentWillUnmount() {
ReactDOM.unmountComponentAtNode(this._popup);
document.body.removeChild(this._popup);
}
_render() {
ReactDOM.render(this.props.children, this._popup);
}
render() {
return null;
}
}
Simplemente envuelve con él los elementos que quieras que estén al final del DOM:
<BodyEnd><Tooltip pos={{x,y}}>{content}</Tooltip></BodyEnd>
Hay un modal en esta respuesta https://stackoverflow.com/a/26789089/883571 que está creando un Modal basado en React adjuntándolo a <body> . Sin embargo, encontré que no es compatible con los complementos de transición provistos por React.
¿Cómo crear uno con transiciones (durante entrar y salir)?
Como otras respuestas han indicado, esto se puede hacer usando Portals. A partir de los Portals v16.0 se incluyen en React.
<body>
<div id="root"></div>
<div id="portal"></div>
</body>
Normalmente, cuando devuelve un elemento del método de representación de un componente, se monta en el DOM como un elemento secundario del nodo padre más cercano, pero con los portales puede insertar un elemento secundario en una ubicación diferente en el DOM.
const PortalComponent = ({ children, onClose }) => {
return createPortal(
<div className="modal" style={modalStyle} onClick={onClose}>
{children}
</div>,
// get outer DOM element
document.getElementById("portal")
);
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
modalOpen: false
};
}
render() {
return (
<div style={styles}>
<Hello name="CodeSandbox" />
<h2>Start editing to see some magic happen {"/u2728"}</h2>
<button onClick={() => this.setState({ modalOpen: true })}>
Open modal
</button>
{this.state.modalOpen && (
<PortalComponent onClose={() => this.setState({ modalOpen: false })}>
<h1>This is modal content</h1>
</PortalComponent>
)}
</div>
);
}
}
render(<App />, document.getElementById("root"));
Ver ejemplo de trabajo here .
Creo que este código es más o menos autoexplicativo y cubre la solución principal de lo que la mayoría de la gente está buscando:
ReactDOM.render(
<Modal />,
document.body.appendChild( document.createElement( ''div'' ) ),
)
El problema fundamental aquí es que en React solo está permitido montar el componente en su elemento principal, que no siempre es el comportamiento deseado. Pero, ¿cómo abordar este problema?
He hecho la solución, dirigida a solucionar este problema. La definición más detallada del problema, src y ejemplos se pueden encontrar aquí: https://github.com/fckt/react-layer-stack#rationale
Razón fundamental
react/react-domviene con 2 suposiciones / ideas básicas:
- cada UI es jerárquica de forma natural. Por eso tenemos la idea de
componentsque se envuelven entre síreact-dommonta el componente hijo (físicamente) en su nodo principal DOM por defectoEl problema es que a veces la segunda propiedad no es lo que quieres en tu caso. En ocasiones, desea montar su componente en un nodo de DOM físico diferente y mantener una conexión lógica entre el padre y el hijo al mismo tiempo.
El ejemplo canónico es un componente similar a Tooltip: en algún punto del proceso de desarrollo puede encontrar que necesita agregar alguna descripción para su
UI element: se renderizará en una capa fija y debería conocer sus coordenadas (que son ese coord deUI elemento mouse coords) y, al mismo tiempo, necesita información, ya sea que deba mostrarse ahora o no, su contenido y algún contexto de los componentes principales. Este ejemplo muestra que a veces la jerarquía lógica no coincide con la jerarquía DOM física.
Eche un vistazo a https://github.com/fckt/react-layer-stack/blob/master/README.md#real-world-usage-example para ver el ejemplo concreto que responde a su pregunta:
import { Layer, LayerContext } from ''react-layer-stack''
// ... for each `object` in array of `objects`
const modalId = ''DeleteObjectConfirmation'' + objects[rowIndex].id
return (
<Cell {...props}>
// the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext
<Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
hideMe, // alias for `hide(modalId)`
index } // useful to know to set zIndex, for example
, e) => // access to the arguments (click event data in this example)
<Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
<ConfirmationDialog
title={ ''Delete'' }
message={ "You''re about to delete to " + ''"'' + objects[rowIndex].name + ''"'' }
confirmButton={ <Button type="primary">DELETE</Button> }
onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation
close={ hideMe } />
</Modal> }
</Layer>
// this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
<LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
<div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
<Icon type="trash" />
</div> }
</LayerContext>
</Cell>)
// ...
En reaccionar conf 2015, Ryan Florence demostró el uso de portales . A continuación, le mostramos cómo puede crear un componente de Portal simple ...
var Portal = React.createClass({
render: () => null,
portalElement: null,
componentDidMount() {
var p = this.props.portalId && document.getElementById(this.props.portalId);
if (!p) {
var p = document.createElement(''div'');
p.id = this.props.portalId;
document.body.appendChild(p);
}
this.portalElement = p;
this.componentDidUpdate();
},
componentWillUnmount() {
document.body.removeChild(this.portalElement);
},
componentDidUpdate() {
React.render(<div {...this.props}>{this.props.children}</div>, this.portalElement);
}
});
y luego todo lo que normalmente puedes hacer en React puedes hacerlo dentro del portal ...
<Portal className="DialogGroup">
<ReactCSSTransitionGroup transitionName="Dialog-anim">
{ activeDialog === 1 &&
<div key="0" className="Dialog">
This is an animated dialog
</div> }
</ReactCSSTransitionGroup>
</Portal>
jsbin demo
También puedes echarle un vistazo al modo de react-modal de Ryan, aunque en realidad no lo he usado, así que no sé qué tan bien funciona con la animación.
Escribí el módulo react-portal que debería ayudarte.
Espero eso ayude. Esta es mi implementación actual de un modal de transición basado en el antecesor anterior:
React = require ''react/addons''
keyboard = require ''../util/keyboard''
mixinLayered = require ''../mixin/layered''
$ = React.DOM
T = React.PropTypes
cx = React.addons.classSet
module.exports = React.createFactory React.createClass
displayName: ''body-modal''
mixins: [mixinLayered]
propTypes:
# this components accepts children
name: T.string.isRequired
title: T.string
onCloseClick: T.func.isRequired
showCornerClose: T.bool
show: T.bool.isRequired
componentDidMount: ->
window.addEventListener ''keydown'', @onWindowKeydown
componentWillUnmount: ->
window.removeEventListener ''keydown'', @onWindowKeydown
onWindowKeydown: (event) ->
if event.keyCode is keyboard.esc
@onCloseClick()
onCloseClick: ->
@props.onCloseClick()
onBackdropClick: (event) ->
unless @props.showCornerClose
if event.target is event.currentTarget
@onCloseClick()
renderLayer: ->
className = "body-modal is-for-#{@props.name}"
$.div className: className, onClick: @onBackdropClick,
if @props.showCornerClose
$.a className: ''icon icon-remove'', onClick: @onCloseClick
$.div className: ''box'',
if @props.title?
$.div className: ''title'',
$.span className: ''name'', @props.title
$.span className: ''icon icon-remove'', @onCloseClick
@props.children
render: ->
$.div()
He escrito una biblioteca para ayudar con esto. Evito los ataques de inserción de DOM utilizados por las estrategias de Portal y, en su lugar, hago uso de los registros basados en el contexto para pasar los componentes de una fuente a un objetivo.
Mi implementación hace uso de los ciclos de renderizado React estándar. Los componentes que teletransporta / inyecta / transporta no causan un doble ciclo de renderizado en el objetivo: todo sucede de forma síncrona.
La API también está estructurada de manera que desaliente el uso de cadenas mágicas en tu código para definir la fuente / destino. En su lugar, debe crear y decorar explícitamente los componentes que se utilizarán como objetivo (Inyectable) y fuente (Inyector). Como este tipo de cosas generalmente se considera bastante mágico, creo que la representación explícita de los componentes (que requiere importaciones directas y uso) puede ayudar a aliviar la confusión sobre dónde se inyecta un Componente.
Aunque mi biblioteca no le permitirá representar como hijo directo del documento .body puede lograr un efecto modal aceptable vinculando a un componente de nivel raíz en su árbol de componentes. Planeo agregar un ejemplo de este caso de uso pronto.
Consulte https://github.com/ctrlplusb/react-injectables para obtener más información.