Passando Dados com Props
Componentes frequentemente precisam exibir dados diferentes dependendo de onde são utilizados. No React, os dados são passados para os componentes utilizando props. Props são entradas para um componente. Elas permitem enviar dados de um componente pai para um componente filho e controlar o que o componente exibe.
Em vez de definir valores fixos dentro de um componente, props tornam os componentes reutilizáveis. O mesmo componente pode ser utilizado várias vezes com dados diferentes, produzindo diferentes resultados na interface.
Abaixo está um exemplo simples de passagem de dados para um componente utilizando props:
function Greeting(props) {
return <h2>Hello, {props.name}</h2>;
}
function App() {
return <Greeting name="Olivia" />;
}
Neste exemplo, o componente App passa o valor "Olivia" para o componente Greeting utilizando uma prop chamada name. O componente Greeting recebe esses dados e os exibe na interface.
Props são somente leitura. Um componente não deve alterar as props que recebe. O objetivo delas é controlar como um componente se apresenta ou se comporta com base em dados externos.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Incrível!
Completion taxa melhorada para 4Passando Dados com Props
Deslize para mostrar o menu
Componentes frequentemente precisam exibir dados diferentes dependendo de onde são utilizados. No React, os dados são passados para os componentes utilizando props. Props são entradas para um componente. Elas permitem enviar dados de um componente pai para um componente filho e controlar o que o componente exibe.
Em vez de definir valores fixos dentro de um componente, props tornam os componentes reutilizáveis. O mesmo componente pode ser utilizado várias vezes com dados diferentes, produzindo diferentes resultados na interface.
Abaixo está um exemplo simples de passagem de dados para um componente utilizando props:
function Greeting(props) {
return <h2>Hello, {props.name}</h2>;
}
function App() {
return <Greeting name="Olivia" />;
}
Neste exemplo, o componente App passa o valor "Olivia" para o componente Greeting utilizando uma prop chamada name. O componente Greeting recebe esses dados e os exibe na interface.
Props são somente leitura. Um componente não deve alterar as props que recebe. O objetivo delas é controlar como um componente se apresenta ou se comporta com base em dados externos.
Obrigado pelo seu feedback!
