Reaccionar accesorios
Los accesorios son argumentos que se pasan a los componentes de React.
Los accesorios se pasan a los componentes a través de atributos HTML.
props significa propiedades.
Reaccionar accesorios
React Props son como argumentos de función en JavaScript y atributos en HTML.
Para enviar accesorios a un componente, use la misma sintaxis que los atributos HTML:
Ejemplo
Agregue un atributo de "marca" al elemento Car:
const myelement = <Car brand="Ford" />;El componente recibe el argumento como un propsobjeto:
Ejemplo
Utilice el atributo de marca en el componente:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
¡Obtener la certificación!
$95 INSCRÍBETE
Pasar datos
Los accesorios también son la forma de pasar datos de un componente a otro, como parámetros.
Ejemplo
Envíe la propiedad "marca" del componente Garaje al componente Automóvil:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Si tiene una variable para enviar, y no una cadena como en el ejemplo anterior, simplemente coloque el nombre de la variable entre corchetes:
Ejemplo
Cree una variable nombrada carNamey envíela al
Carcomponente:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
const carName = "Ford";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
O si fuera un objeto:
Ejemplo
Cree un objeto llamado carInfoy envíelo al
Carcomponente:
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
}
function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Nota: ¡Los React Props son de solo lectura! Obtendrá un error si intenta cambiar su valor.