¿Cuál es la definición de componente principal?

React es una herramienta para detectar cambios y realizar manipulaciones en el DOM, que a su vez es básicamente un árbol . Los componentes de React y JSX son azúcar sintático para llamar a las API de DOM.

p.ej

 ReactDOM.render( React.createElement('div', null, 'Hello World'), document.getElementById('root') );

Es tan válido como pasar un Componente como primer argumento.

• Un componente representa un elemento real del DOM
• El elemento de un DOM puede entenderse como un nodo en un árbol

Entonces, un componente/nodo principal se puede definir como:

el nodo que es un predecesor de cualquier nodo se denomina NODO PADRE. En palabras simples, el nodo que tiene una rama desde él a cualquier otro nodo se denomina nodo principal. El nodo padre también se puede definir como "El nodo que tiene hijo/hijos".

es A padre de C

No. A es un nodo principal por definición, pero no el principal de C A todos los efectos, A es abuelo de C porque es su predecesor pero no su PADRE (directamente predecesor).

A es el padre de B , que es el padre de C

Si accedería a C en el DOM, la siguiente es una declaración válida:

 A.parentNode.parentNode

¿ B es padre de C

¡Sí!

B obtiene el elemento de C a través de los niños. Si C es el hijo de B, entonces se supone que B es el padre de C. Pero eso debería ser una contención como se menciona aquí.

Eso es exactamente. Todo lo que se pasa dentro de una instanciación de componentes se asigna a un nombre de apoyo especial children . Una containment es solo una forma elegante de decir que un componente puede recibir niños arbitrarios de sus padres y aún así poder acceder a él.

 const Parent = () => <Child> Arbitrary value or node </Child>; const Child = ({ children }) => <p> {children} </p>;

children representa todo lo que se pasó dentro de la etiqueta del componente.

No hay una definición oficial de la documentación de React. El término se usa a menudo de manera informal y, a veces, para referirse a cualquier antepasado que no sea el padre directo.

Si desea utilizar el término de manera técnicamente precisa, debe distinguir entre elementos (JSX) y componentes (montados).

• JSX, al igual que XML, define una estructura de árbol anidando etiquetas. Estas etiquetas pueden representar un elemento de fragmento, un elemento incorporado (en minúsculas) o hacer referencia a un componente de clase/función para representar (en mayúsculas)

  El padre de un elemento es el elemento del cual es un hijo sintáctico directo.

  En su ejemplo <B><C /><B> , <B> es el elemento principal de <C> . <B> es el nodo raíz de este árbol (representado por A ), no tiene un elemento principal. No hemos visto dónde se usa <A> o qué elemento principal podría tener. <C /> no tiene elementos secundarios.

• React mantiene el estado de los componentes en una estructura de árbol, ya sean elementos DOM nativos, instancias de componentes de clase, estados de enlace de componentes de función u otras cosas (proveedores y consumidores de contexto, portales, etc.). Puede inspeccionar esta estructura, a menudo denominada "DOM virtual", en las herramientas de desarrollo de React.

  El padre de un componente es el componente en el que se representa.

  En su ejemplo A = () => (<B>< C/></B>) , A es el componente principal de B . No hemos visto qué hace B con el elemento JSX <C /> , por lo que no conocemos el componente principal de C ; depende de la implementación. Si B = ({children}) => (<>{children}</>) , el componente principal de C sería el mismo B , pero en B = ({children}) => (<div>{children}</div>) sería el "componente" div . Y es posible que B no represente el apoyo children en absoluto, o que lo represente varias veces, o que modifique lo que se representa.

Al menos dentro de los documentos de reacción, no existe una definición exclusiva de los términos parent/child component , pero se puede derivar una definición del uso de esos términos en los documentos, lo que podría ser obstinado.

Entonces, mi definición sería: en el árbol de jerarquía, cada componente que está por encima del componente en cuestión, tiene una relación de antepasado con ese componente y, por lo tanto, es un componente principal. Todo a continuación puede servir como un hijo directo o indirecto.

Además, los componentes principales directos pueden pasar información a través de accesorios a sus elementos secundarios directos y a través del contexto a sus elementos secundarios directos e indirectos. Los componentes secundarios pueden recibir información de los componentes principales en consecuencia.

Por lo tanto:

 Is A the parent of C?

sí (diría un padre directo, pero esto puede ser discutido. Dado que A puede pasar accesorios a C, pero en el árbol de jerarquía, C se ubicaría debajo de B. A > B > C)

 Is B the parent of C?

si, padre directo. Aunque es una contención, aún así, B puede proporcionar accesorios directos a C mediante una llamada de función dentro de B children(<propsForCFromB>)

La "contención" es solo un concepto en React donde los padres reciben a sus hijos dinámicamente en tiempo de ejecución (en lugar de estar predefinidos). En otras palabras, la contención es un caso especial de una relación padre-hijo.

La primera oración de la sección sobre contención que vinculó dice: "Algunos componentes no conocen a sus hijos antes de tiempo" y luego muestra un ejemplo de un componente llamado FancyBorder recibe niños arbitrarios a través {props.children} . La existencia de hijos implica que algo es su padre, que en este caso es FancyBorder .

No estoy seguro de si hay definiciones acorazadas de "padre" en React. "Padre" es un término informático genérico que se utiliza para referirse a algo inmediatamente superior a otro en una jerarquía. Por ejemplo, "C:\Archivos de programa\Microsoft Office" es el directorio principal de "C:\Archivos de programa\Microsoft Office\Word".

Un componente que acepta 'niños'

Entonces, en un componente de orden superior, que administra los componentes de representación en función del estado de autenticación de un usuario, los elementos secundarios del componente principal serían el componente que devuelve el HoC.

 const Protected = () => { const isAuthorised = useAuth(); return isAuthorised ? <Outlet /> : <Login />; };

Este es el código de cómo reacciona-router-dom administra los componentes de representación en función del estado de autenticación. <Outlet /> solo significa que es el componente inicial que está tratando de representar

Entonces puede ver que los componentes <Outlet /> y <Login /> serían elementos secundarios del componente Protegido

En su pregunta, consideraría que A es un componente de orden superior y luego B el padre real de C