Passando Props
Parte da seção Fundamentos do Journey de React da Coddy — lição 17 de 42.
Vamos conectar uma prop de ponta a ponta. Três passos, sempre os mesmos:
// 1. receba isso
function Greeting({ name }) {
// 2. use isso
return <p>Hello, {name}!</p>;
}
// 3. passe isso
<Greeting name="Ada" />Strings são passadas entre aspas. Números e expressões usam chaves, a mesma regra dos atributos:
<Score points={97} />
Desafio
InicianteO componente Greeting ignora tudo o que você passa para ele.
- Faça o
Greetingreceber uma propnamee renderizarHello, {name}!em seu parágrafo. - Em App, passe
name="Ada"para que a página mostreHello, Ada!.
Experimente você mesmo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentos
1Conheça o React
O que é o React?Seu primeiro componenteRegra do elemento pai únicoJSX não é HTMLRecapitulação: Conheça o React