¿Cómo pasar accesorios al componente ReactJS que se envolvió en la variable?

Props: Props significa propiedades. Props es un argumento que pasamos del componente principal al componente secundario en ReactJS a través del atributo HTML. Puede consultar este artículo para obtener más información sobre accesorios : https://www.geeksforgeeks.org/reactjs-props-set-1/

Ahora veremos cómo pasar accesorios al componente ReactJS que se envolvió en variables. Aquí hemos usado el método React.cloneElement() para obtenerlo. Todo el proceso se muestra a continuación. Aquí se muestra todo el proceso creando la aplicación.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app projectname

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre del proyecto, acceda a ella con el siguiente comando:

cd projectname

Estructura de la carpeta del proyecto: Tiene que verse así.

 

App.js: aquí el componente <Program/> está envuelto en la variable » c «. Luego, el método React.cloneElement() utilizado aquí. Este método se usa para crear el clon del elemento que se dará como argumento, también aquí podemos pasar accesorios y niños como argumentos. Aquí la variable «c» se pasa como un elemento en el método React.cloneElement() para la clonación, también se pasan accesorios {name1: «C++», name2: «JAVA»}.

Puede consultar este artículo para saber más sobre React.cloneElement(): https://www.geeksforgeeks.org/how-to-use-react-cloneelement-function/

Nota: antes de usar el componente, debe importar el archivo del componente
 

import React from "react";
import Program from "./Program";
  
const App = () => {
  let c = <Program />;
    
  // Here passed props - {name1: "C++", name2: "JAVA"}
  const p = React.cloneElement(c, 
    { name1: "C++", name2: "JAVA" });
  return (
  <>
    {p}
  </>
  );
};
  
export default App;

Program.js: aquí los accesorios se pasan desde App.js

import React from 'react';
  
const Program = (props) => {
    return (
        <>
            <h1>
                My favourite programming 
                language is {props.name1}
            </h1>
            <h1>
                Another favourite programming 
                language is {props.name2}
            </h1>
        </>
      )
}
  
export default Program;

Pasos para ejecutar su aplicación:  Primero, vaya al directorio raíz y luego ejecute la aplicación con este comando.

npm start

Producción: