En este blog revisamos dos temas fundamentales de React, incluidos los accesorios predeterminados y la verificación de tipos con PropTypes. Las Prop son objetos que se pasan de un componente a otro (por ejemplo, de un componente principal a un componente secundario). Si por alguna razón no pasamos las props al componente hijo, podemos usar props predeterminados en el componente hijo para evitar que la aplicación se rompa. La aplicación de ejemplo para este blog se muestra a continuación y el repositorio de github está aquí.

La aplicación de ejemplo que tiene un principal componente de los padres App.js (se muestra a continuación) y los dos componentes definidos por el usuario; Asunto.js y Mensaje.js

import React from "react";
import "./App.css";
import Message from "./components/Message";
import Subject from "./components/Subject";function App() {
return (
<div className="App">
<Message name={"Paul"} age={12} sport={"Soccer"}>
<Subject subjects={} />
</Message>
</div>
);
}
export default App;

Accesorios predeterminados

en un componente de clase los accesorios predeterminados se pueden definir dentro de la clase como objeto estático como se muestra a continuación,

class Message extends Component {
static defaultProps = {
name: "Eric",
age: 10,
sport: "Soccer",
}
render() {
return (
<div>
</div>
)
}
}

o fuera de la clase como se muestra a continuación

class Message extends Component {
render() {
return (
<div>
</div>
)
}
}
Message.defaultProps = {
name: "Eric",
age: 10,
sport: "Soccer",
}

en el componente funcional, los valores predeterminados se pueden introducir utilizando la sintaxis de argumentos predeterminados como

function Message({name="Eric",age"=10, sport ="Soccer"}){
return(
<div>
</div>
)
}

También podemos usar Message.defaultProps={} mostrado arriba.

PropTypes

PropTypes son una función de validación de React props . Con PropTypes podemos especificar el tipo de datos de props como se muestra a continuación. por ejemplo, podemos pasar name, sport y accesorios deportivos a una instancia del componente Message; <Message name={"Eric} age={10} sport={"Soccer"} />. nombre, deporte son ambos tipos de datos de cadena y el prop de edad es un tipo de datos de número. Cuando un valor incorrecto de la proposición, se mostrará un error en la consola

Message.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
sport: PropTypes.string,
};

En Reaccionar, un componente puede tener uno, varios o sin hijos. Este hijo podría ser un elemento o cadena de React u otro tipo de datos. Con PropTypes.element podemos especificar que solo se puede pasar un solo hijo a un componente como hijos. Además, el hijo único debe ser un elemento React; puede ser un elemento JSX normal (elementos React que representan etiquetas DOM) u otro componente React, pero no puede ser una cadena. Con PropTypes.element, no se muestra ninguna advertencia en la consola si no se pasa ningún elemento React. Sin embargo, con PropTypes.element.isRequired requerimos que se pase un solo hijo; Message.propTypes={children: PropTypes.element.isRequired}

Pero antes de usar PropTypes.element necesitamos usar this.props.children en el Mensaje de componente. this.props.children div — – un accesorio especial que se pasa automáticamente a los componentes

class Message extends React.Component {
render() {
let name = this.props.name;
let age = this.props.age;
let sport = this.props.sport;
let children = this.props.children;
return (
<div>
<h3>
My name is {name}, I am {age} old and I love playing {sport}{" "}
</h3>
<div>{children}</div>
</div>
);
}
}

Resumen

Hemos mostrado cómo usar accesorios predeterminados y cómo verificar los tipos de React con PropTypes. También hemos discutido un prop de React especial- this.props.children