¿Cómo acceder a props.children en un componente funcional sin estado en ReactJS?

Los {accesorios. children} le permite crear una plantilla genérica, que puede ser modificada por un padre cuando se invoca. De esta forma, un componente principal puede pasar fácilmente lo que sea necesario a su elemento secundario, incluso las características de diseño generadas. Cada vez que llama a un componente, automáticamente muestra lo que tiene entre sus etiquetas de apertura y cierre. Un componente con niños siempre se identifica con una etiqueta de apertura y una de cierre. Cada niño debe ir entre estas dos etiquetas.

Los props se implementan definiendo props en el componente principal y pasándolos al siguiente componente secundario y luego pasando el valor nuevamente a través de props en el componente secundario, y luego nuevamente a través del nieto, que se repite hasta que el valor del valor pasado tiene llegó al componente de destino. Es un proceso tedioso y propenso a errores que disminuye la flexibilidad del código.

Implementación de {props. children}: La implementación es bastante sencilla. Importe el componente secundario en el componente principal, pero en lugar de invocarlo con una etiqueta de cierre automático, use una etiqueta estándar de apertura/cierre. La información se pasa entre las etiquetas de apertura y cierre de un componente secundario, además de la implementación estándar para pasar accesorios.

¿Por qué necesita {props. niños}? 

Si queremos un componente flexible que pueda almacenar cualquier cosa entre las etiquetas de apertura y cierre de un componente principal, que conserve los estilos de formato de todos sus elementos secundarios, entonces {props. Niños} es lo que necesitamos. Puede haber casos en los que no conozca a sus hijos de antemano, por lo que simplemente pasa {props. children} que especifica todo lo que se incluirá entre las etiquetas de apertura y cierre. Esto se utiliza en la creación de diseños. Los accesorios estándar no pueden especificar los estilos de otros componentes. Puede que sea necesario crear diseños en los que ciertos componentes permanezcan iguales, pero el contenido dentro de ellos difiera ligeramente, por lo que crear diferentes componentes para representar datos con diferentes estilos podría no ser una buena práctica. Cuando un componente quería transmitir información a sus nietos y subsiguientes hijos, funcionaba bien hasta que un gran número de niños creció hasta el punto en que muchos de los accesorios eran idénticos y necesitaban ser modificados ligeramente. Es difícil comprender las características de cada accesorio cuando se trabaja con cientos de ellos. Cree diseños con {props. niños} y evite taladrar puntales. 

ventajas:

• Evita la perforación puntal
• Ayuda a crear componentes de composición.
• Ayuda en la construcción de diseños.
• Para agrupar elementos similares desconocidos en un elemento padre.
• Podemos usarlos cuando los elementos no se conocen de antemano.

Entendamos con la ayuda de un ejemplo de código. 

Enfoque: diseñemos un componente de tarjeta simple. Pasaremos los datos a través de [props. niños] y ver cómo aparecen nuestras tarjetas.

• Crear una aplicación de reacción llamada «tarjetas»
• Crear un componente de botón
• Crear un componente de tarjeta
• Cree varias tarjetas en el componente de la aplicación.

Paso 1: Cree «tarjetas» de la aplicación de reacción. Cree un directorio de proyectos, diríjase a la terminal y cree una aplicación de reacción llamada «tarjetas» usando el siguiente comando:

npx create-react-app cards

Después de crear la aplicación de tarjetas, cambie a la nueva carpeta de tarjetas escribiendo el siguiente comando:

cd cards

Paso 2: Modifique la estructura de su proyecto. La estructura del directorio actualmente se ve así:

Estructura del proyecto por defecto

Modificaremos la carpeta y mantendremos los archivos que necesitamos para este ejemplo. Ahora, asegúrese de que su estructura de archivos se vea así:

Estructura de directorios 

Así quedaría la estructura final del proyecto: 

Estructura del Proyecto Final 

Paso 3: Escribe el siguiente código en index.html . Incluya el siguiente código en su archivo index.html, ubicado en la carpeta pública del directorio de su proyecto.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1" />
    <meta name="theme-color" 
          content="#000000" />
    <meta name="description" 
          content="Web site created using create-react-app" />
  
    <title>React App</title>
</head>
  
<body>
      
    <div id="root"></div>
  
</body>
  
</html>

Paso 4:  crea el componente de botón. Cree un nuevo archivo llamado Button.js en su carpeta src. Este componente tendrá tres botones. Usaremos props en los primeros dos botones usando el método estándar, pasando datos desde el componente principal hasta el componente del botón, mientras que en el tercer botón usaremos {props. niños}. El componente de botón mostrará todo lo que esté incluido en sus etiquetas de apertura y cierre.

Agregue el siguiente código al archivo Button.js . 

import React from 'react';
  
const buttonstyle={
  backgroundColor:'white',
  border: '2px solid #4CAF50',
  color: 'black',
  padding: '4px',
  textAlign: 'center',
  fontSize: '16px',
  margin: '4px 2px',
  cursor: 'pointer',
   
}
  
  
const Button = (props) => {
  return <div>
      <button  style={buttonstyle}>
      {props.button1}
      </button>
      <button  style={buttonstyle}>{props.button2}</button>
      <button  style={buttonstyle}>{props.children}</button>
        
       
  </div>;
};
  
export default Button;

Paso 5: cree el componente de la tarjeta. Cree un nuevo archivo Card.js en la carpeta src. Aquí crearemos un componente Tarjeta. Pasaremos datos de la tarjeta usando {props. niños}.

import React from 'react';
  
const Card = (props) => {
  return <div style={{
      width:'30%',
      margin:' 30px auto 20px auto',
      boxShadow:'0 5px 10px 2px rgba(0,0,0,0.25) ',
      padding:'20px',
      textAlign:'center'
  }}>
  
{props.children}
  </div>;
};
export default Card;

Paso 6: elimine el código existente de su archivo App.js y reemplácelo con el siguiente código para representar los componentes. Usaremos el componente Tarjeta para crear cuatro tarjetas. La primera tarjeta contiene texto en una etiqueta <p>. La segunda tarjeta tiene un encabezado, una regla horizontal y un subtítulo. La tercera tarjeta tiene texto en la etiqueta <h4>. La cuarta tarjeta incorpora un componente de botón. En los primeros componentes de dos botones, se pasan los accesorios estándar, seguidos de un encabezado, una regla horizontal y texto en el último botón. Todos los elementos incluidos dentro de las etiquetas de apertura y cierre se representarán usando {props. niños}.

import Card from './Card';
import Button from './Button';
function App() {
  return (
  <>
  {/* card 1 */}
  <Card>
   <p style={{
     color:'green',
     fontWeight:'bold'
   }}>
    Hello,GEEKS!
   </p>
  
    
  </Card>
  
    {/* card 2  */}
    <Card>
      <h1 style={{color:'green'}}>Welcome to GeeksforGeeks</h1>
      <hr style={{
        borderTop:'dotted 2px green'
      }} />
     <h3>A computer Science portal for Geeks. </h3>
    </Card>
  
    {/* card 3  */}
    <Card>
    <h4>
      It contains well written , well thought and well 
      explained computer science articles. 
    </h4> 
    </Card>
  
    {/* card 4 */}
    <Card>
     <Button button1='Explore Courses' button2='Read Articles'>
     <h3 style={{color:'Blue'}}>CONTRIBUTE</h3>
     <hr style={{
        borderTop:'dotted 2px green'
      }} />
    Pick suggested articles and get started .
     </Button>
    
    </Card>
  </>
  );
}
export default App;

Paso 7: escriba el siguiente código en el archivo index.js . El archivo index.js sirve como punto de entrada principal y, dentro de él, el archivo App.js se representa en el ID raíz del DOM.

import React from 'react';
import ReactDOM from 'react-dom';
  
import App from './App';
  
ReactDOM.render(<App />, document.getElementById('root'));

Paso para ejecutar la aplicación: Ahora ejecutemos nuestra aplicación usando el siguiente comando.

npm start

Salida: De forma predeterminada, el proyecto React se ejecutará en el puerto 3000. Puede acceder a él en localhost:3000 en su navegador. Verá que los datos de cada tarjeta difieren, pero el diseño sigue siendo el mismo. El contenido de las tarjetas tiene un formato diferente. 

Implementación de props.children – Salida de trabajo