Cómo React renderiza componentes en nodos DOM específicos.
Como todos sabemos, una de las ventajas de React es que su API es muy simple. Al devolver la estructura básica de un componente a través del método render, al igual que una función simple, puede obtener un componente de reacción reutilizable. Pero a veces existen algunas restricciones, especialmente en su API, es imposible controlar el nodo DOM en el que se debe representar el componente, lo que dificulta el control de algunos componentes de la capa elástica. El problema ocurre cuando el elemento principal está configurado en desbordamiento: oculto.
Por ejemplo, así:
Lo que realmente queremos es esto:
Afortunadamente, aunque no es obvio, existe una forma bastante elegante de resolver este problema. omitido. La primera función de reacción que aprendimos es el método de renderizado. Su firma de función es la siguiente:
Representación de ReactComponent (
Componente de telemetría,
Contenedor DOMElement,
p>
p>
[Devolución de llamada de función]
)
Normalmente usamos este método para presentar la aplicación completa a un nodo DOM. La buena noticia es que este enfoque no termina ahí. Podemos usar el método ReactDom.render para representar otro componente en un elemento DOM específico dentro de un componente. Como componente, el método de renderizado debe ser puro (por ejemplo, no puede cambiar el estado ni interactuar con el DOM). Entonces necesitamos llamar al método ReactDom.render en componenteDidUpdate o componenteDidMount.
Además, debemos asegurarnos de que cuando se descarga el elemento padre, también se descarga el componente modificado.
Después de ordenar, obtenemos los siguientes componentes:
Importar React desde "react", { Component }
Importar ReactDom desde "react-dom"
p>Exportar componente extendido RenderInBody de clase predeterminada {
Constructor (p) {
super();
}
ComponentIdMount(){//Cree una nueva etiqueta div e insértela en el cuerpo.
este . popup = documento . createelement(" div ");
cuerpo del documento . _ renderizar capa();
}
componentDidUpdate() {
Esto. _ render Layer();
}
ComponentWillUnmount(){//Al descargar el componente, asegúrese de que la capa elástica también esté desmontada.
reaccionar DOM . unmountcomponentatnode(este . popup);
cuerpo del documento. >_renderLayer(){//Renderiza la capa elástica en la etiqueta div debajo del texto.
reaccionar DOM . render(este . props . niños, este . popup
}
render(){
Regresar); null
}
}
En resumen:
Cuando componenteDidMount, inserte manualmente una etiqueta div en el cuerpo y luego use ReactDom. render Representa el componente en esa etiqueta div.
Cuando queremos renderizar el componente directamente en el cuerpo, solo necesitamos envolver una capa de RenderInBody alrededor del componente.
Componente de extensión de diálogo "Exportar clase predeterminada"{
render(){
return{
ltRenderInBody gtSoy un renderizado de marco de diálogo bodylt/render inbody gt;
}
}
}
El traductor agregó:
Al convertir el componente anterior, podemos renderizar y descargar el componente en el nodo dom especificado y agregar control de posición de la siguiente manera:
//Este componente se usa para renderizar la capa elástica dentro del cuerpo.
Importar React desde "react", {Component}
Importar ReactDom desde "react-dom"
Exportar componente de extensión RenderInBody de clase predeterminada{
Constructor(p){
Super(p);
}
componentidmount(){
/**
popupInfo={
RootDom: ***, //Recibe el nodo Dom del componente de la capa de bomba, como document.body
Izquierda: ** *, //Posición relativa
Arriba: ***//Información de posición
}
*/
let { popupInfo } = this .props
this . popup = document . createelement(' div ');
this . rootdom = información emergente;
this rootdom. . appendchild (this . popup);
//Solo podemos usar este método para configurar las propiedades de div
this position = 'absolute'; p>
este estilo emergente. izquierda = información emergente izquierda 'px';
este estilo emergente. >Esto. _renderLayer()
}
componentDidUpdate() {
Esto.
_ renderizar capa();
}
componentWillUnmount(){
este . rootdom .eliminar hijo(este . popup); >}
_renderLayer(){
react DOM . render(este . props . niños, este . popup
}
Devolver nulo
}
}
Nota: funciones de adquisición de posición y evaluación del nodo raíz
Exportar valor predeterminado (dom, filtros de clase) = gt;{
let left = dom.offsetLeft,
top = DOM offsettop scroll top,
actual = dom.offsetParent,
root DOM = accessBodyElement(DOM); //El valor predeterminado es el cuerpo.
Y (actual!=null) {
izquierda = actual desplazamiento izquierdo
superior = actual
actual. = current.offsetParent
if (amplificador actual ampcurrent. Coincidencias (filtros de clase)){
rootDom = actual
Break;
}
}
return {izquierda: izquierda, arriba: arriba, raíz DOM: rootDom };
}
/** *
1.dom: Responda al nodo dom de la capa elástica, o después de alcanzar la posición dom, la posición se puede ajustar para que la posición de la capa elástica sea más apropiada.
*
2.classFilters: el nombre de la clase de filtro del nodo DOM que necesita recibir el componente de capa elástica.
/
Dirección original
Resumen