neste blog nós revisamos dois tópicos fundamentais Reat, incluindo props por omissão e tipografia com PropTypes. Os adereços são objetos passados de um componente para outro (por exemplo, de um componente pai para um componente filho). Se não conseguirmos passar os adereços para o componente criança, podemos usar adereços padrão no componente criança para impedir que o aplicativo quebre. O aplicativo de exemplo para este blog é mostrado abaixo e o GitHub repo está aqui.

O aplicativo de exemplo tem um principal/principal componente chamado App.js (mostrado abaixo) e os dois componentes definidos pelo Usuário; assunto.js e mensagem.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;

Padrão Adereços

em uma classe de componente padrão adereços pode ser definido dentro da classe, como objeto estático, como mostrado abaixo,

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

ou fora da sala de aula, como mostrado abaixo.

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

no componente funcional, os valores padrão podem ser introduzidos usando argumentos padrão de sintaxe como

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

também podemos usar Message.defaultProps={} mostrado acima.

PropTypes

PropTypes are a React props validation feature . Com PropTypes podemos especificar o tipo de dados de props como mostrado abaixo. por exemplo, podemos passar o nome, Esporte e props para uma instância do componente de mensagem; . nome, sport são ambos string data type e o age prop é um número de dados tipo. Quando um valor incorreto é fornecido para uma hélice, um erro será mostrado no console

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

em React, um componente pode ter um, muitos ou nenhum filho. Esta criança pode ser um elemento React ou string ou outro tipo de dados. With PropTypes.element we can specify that only a single child can be passed to a component as children. Além disso, o único filho deve ser um elemento reativo; pode ser um elemento JSX regular (elementos reativos que representam tags DOM) ou outro componente Reat, mas não pode ser uma string. Com PropTypes.element, nenhum aviso é mostrado na consola se nenhum elemento React for passado. No entanto, comPropTypes.element.isRequired requeremos que uma única criança seja passada; Message.propTypes={children: PropTypes.element.isRequired}

Mas, antes de usar PropTypes.element precisamos usar this.props.children no componente de Mensagem. this.props.children é uma espécie de adereço que é passado para os componentes automaticamente

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

Resumo

temos mostrado como utilizar o padrão adereços e como fazer typechecking em Reagir adereços com PropTypes. Também discutimos uma reação especial prop- this.props.children