Reagir adereços
Props são argumentos passados para componentes React.
Props são passados para componentes por meio de atributos HTML.
propssignifica propriedades.
Reagir adereços
React Props são como argumentos de função em JavaScript e atributos em HTML.
Para enviar props para um componente, use a mesma sintaxe dos atributos HTML:
Exemplo
Adicione um atributo "marca" ao elemento Carro:
const myelement = <Car brand="Ford" />;O componente recebe o argumento como um propsobjeto:
Exemplo
Use o atributo de marca no componente:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Obter certificação!
$ 95 INSCRIÇÃO
Passar dados
Props também são como você passa dados de um componente para outro, como parâmetros.
Exemplo
Envie a propriedade "marca" do componente Garagem para o componente Carro:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Se você tiver uma variável para enviar, e não uma string como no exemplo acima, basta colocar o nome da variável entre colchetes:
Exemplo
Crie uma variável nomeada carNamee envie-a para o
Carcomponente:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
const carName = "Ford";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Ou se fosse um objeto:
Exemplo
Crie um objeto nomeado carInfoe envie-o para o
Carcomponente:
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
}
function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Nota: React Props são somente leitura! Você receberá um erro se tentar alterar seu valor.