In questo blog esaminiamo due argomenti fondamentali di React, tra cui props predefiniti e typechecking con PropTypes. Gli oggetti di scena sono oggetti passati da un componente all’altro (ad esempio da un componente padre a un componente figlio). Se per qualsiasi motivo non riusciamo a passare gli oggetti di scena al componente figlio, possiamo utilizzare gli oggetti di scena predefiniti nel componente figlio per evitare che l’app si rompa. L’applicazione di esempio per questo blog è mostrato di seguito e il repository github è qui.

L’applicazione di esempio è un main/genitore componente chiamato App.js (mostrato sotto) e i due componenti definiti dall’utente; Oggetto.js e Messaggio.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;

di Default Puntelli

in una classe componente di default puntelli può essere definito all’interno della classe come oggetto statico, come mostrato di seguito,

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

classe o fuori dalla classe, come illustrato di seguito.

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

nella componente funzionale, i valori di default possono essere introdotte usando argomenti di default sintassi come

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

Si può anche usare Message.defaultProps={} sopra indicato.

PropTypes

PropTypes sono una funzione di convalida React props . Con PropTypes possiamo specificare il tipo di dati di oggetti di scena come mostrato di seguito. ad esempio, possiamo passare name, sport e props sport a un’istanza del componente Message; <Message name={"Eric} age={10} sport={"Soccer"} /> . nome, sport sono entrambi tipo di dati stringa e l’età prop è un tipo di dati numero. Quando viene fornito un valore errato per un prop, verrà visualizzato un errore nella console

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

In React, un componente può avere uno, molti o nessun figlio. Questo figlio potrebbe essere un elemento React o una stringa o un altro tipo di dati. Con PropTypes.element possiamo specificare che solo un singolo figlio può essere passato a un componente come figli. Inoltre, il singolo figlio deve essere un elemento React; può essere un normale elemento JSX (elementi React che rappresentano tag DOM) o un altro componente React, ma non può essere una stringa. Con PropTypes.element, nessun avviso viene visualizzato sulla console se non viene passato alcun elemento React. Tuttavia, con PropTypes.element.isRequired abbiamo bisogno di un singolo figlio è passato; Message.propTypes={children: PropTypes.element.isRequired}

Ma prima di usare PropTypes.elementdobbiamo usare this.props.children nel componente del messaggio. this.props.children — un puntello speciale che viene passato automaticamente ai componenti

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>
);
}
}

Sommario

Abbiamo mostrato come usare gli oggetti di scena predefiniti e come fare typechecking su React props con PropTypes. Abbiamo anche discusso uno speciale React prop- this.props.children