w tym blogu omówimy dwa podstawowe tematy Reacta, w tym właściwości domyślne i sprawdzanie typów za pomocą Proptypów. Właściwości są obiektami przekazywanymi z jednego komponentu do drugiego (na przykład z komponentu nadrzędnego do komponentu podrzędnego). Jeśli z jakiegoś powodu nie przekażemy właściwości do komponentu podrzędnego, możemy użyć domyślnych właściwości w komponencie podrzędnym, aby zapobiec uszkodzeniu aplikacji. Przykładowa aplikacja dla tego bloga jest pokazana poniżej, a repo github jest tutaj.

przykładowa aplikacja ma główny / Nadrzędny komponent o nazwie app.js (pokazane poniżej) i dwa komponenty zdefiniowane przez użytkownika; temat.js i wiadomość.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;

domyślne właściwości

w komponencie klasy domyślne właściwości mogą być zdefiniowane w klasie jako obiekt statyczny, jak pokazano poniżej,

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

lub poza klasą, jak pokazano poniżej

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

w komponencie funkcyjnym wartości domyślne można wprowadzić używając domyślnej składni argumentów w taki sposób

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

możemy również użyć pokazanego powyżej.

PropTypes

PropTypes to funkcja walidacji właściwości Reactowych . Za pomocą PropTypes możemy określić typ danych właściwości, jak pokazano poniżej. na przykład możemy przekazać właściwości name, sport i sport Do instancji komponentu Message; <Message name={"Eric} age={10} sport={"Soccer"} />. NAZWA, sport to zarówno typ danych string, jak i właściwość age to typ danych number. Gdy dla właściwości zostanie podana Nieprawidłowa wartość, w konsoli pojawi się błąd

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

w Reakcie komponent może mieć jedno, wiele lub nie mieć Potomków. Ten potomek może być elementem Reactowym, łańcuchem lub innym typem danych. Z PropTypes.element możemy określić, że tylko jeden potomek może być przekazany do komponentu jako potomek. Co więcej, pojedynczy potomek musi być elementem Reactowym; może to być zwykły element JSX (Elementy Reactowe reprezentujące znaczniki DOM) lub inny komponent Reactowy, ale nie może to być łańcuch znaków. W przypadku PropTypes.element nie jest wyświetlane żadne ostrzeżenie na konsoli, jeśli nie zostanie przekazany żaden element Reactowy. Jednak z PropTypes.element.isRequired wymagamy, aby jedno dziecko zostało przekazane; Message.propTypes={children: PropTypes.element.isRequired}

ale zanim użyjemyPropTypes.element musimy użyćthis.props.children w komponencie wiadomości. this.props.children — specjalna właściwość, która jest przekazywana do komponentów automatycznie

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

podsumowanie

pokazaliśmy, jak używać domyślnych właściwości i jak sprawdzać Typ Na reactowych właściwościach z PropTypes. Omówiliśmy również specjalny react Propp – this.props.children