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
Javascript
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
Javascript
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:
