106 lines
3.4 KiB
Markdown
106 lines
3.4 KiB
Markdown
|
---
|
|||
|
title: Handling Data with Props in React
|
|||
|
localeTitle: Manipulando dados com adereços no React
|
|||
|
---
|
|||
|
## Manipulando dados com adereços no React
|
|||
|
|
|||
|
Adereços fornecem uma maneira de passar e acessar dados em componentes do React.
|
|||
|
|
|||
|
Os dados são passados para os componentes do React como um atributo no JSX.
|
|||
|
|
|||
|
```javascript
|
|||
|
<MyComponent someAttribute={data.value} />
|
|||
|
```
|
|||
|
|
|||
|
No JSX, as chaves indicam uma expressão JavaScript que deve retornar um valor. Os dados passados são acessados via adereços no componente definido.
|
|||
|
|
|||
|
```javascript
|
|||
|
const MyComponent = props => {
|
|||
|
<p>{props.someAttribute}</p>
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Agora vamos percorrer um exemplo no CodePen.
|
|||
|
|
|||
|
### Começando
|
|||
|
|
|||
|
Se você ainda não o fez, vá em frente e inscreva-se para uma [conta gratuita da CodePen](https://codepen.io/accounts/signup/user/free) .
|
|||
|
|
|||
|
Crie uma nova caneta selecionando "Criar"> "Nova caneta" ao lado da sua foto de perfil do CodePen.
|
|||
|
|
|||
|
Em seguida, adicionaremos as bibliotecas apropriadas para renderizar nossos componentes React.
|
|||
|
|
|||
|
Abra o painel de configurações do JavaScript selecionando "Configurações"> "JavaScript". Selecione "Babel" em "Preprocessador JavaScript".
|
|||
|
|
|||
|
Em seguida, vamos adicionar nossas bibliotecas React. Em "JavaScript externo", selecione a lista suspensa "Adicionar rápido" e adicione as bibliotecas "Reagir" e "Reagir DOM".
|
|||
|
|
|||
|
### Usando Adereços
|
|||
|
|
|||
|
Primeiro vamos definir alguns dados fictícios no nosso arquivo JavaScript.
|
|||
|
|
|||
|
```javascript
|
|||
|
const blogData = {
|
|||
|
title: 'My blog title',
|
|||
|
body: 'Arcu viverra dolor eros interdum, quis nonummy accusantium at lorem luctus iaculis.'
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Em seguida, vamos definir nossos componentes do blog.
|
|||
|
|
|||
|
```javascript
|
|||
|
const Heading = () => {
|
|||
|
return (
|
|||
|
<h1>My Blog</h1>
|
|||
|
);
|
|||
|
};
|
|||
|
|
|||
|
const Blog = props => {
|
|||
|
return (
|
|||
|
<div>
|
|||
|
<h2>{props.title}</h2>
|
|||
|
<p>{props.body}</p>
|
|||
|
</div>
|
|||
|
);
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Percebeu como usamos o objeto props para renderizar os valores de título e corpo que serão passados para o componente Blog. Adereços é somente leitura ou imutável, então não precisamos nos preocupar em mudar os valores dos adereços.
|
|||
|
|
|||
|
Antes de escrevermos nosso componente App, precisamos proteger nosso componente para definir o tipo de variável que será transmitido para cada prop. Vamos definir isso usando React.PropTypes. Adicione o seguinte ao seu arquivo JavaScript.
|
|||
|
|
|||
|
```javascript
|
|||
|
Blog.propTypes = {
|
|||
|
title: React.PropTypes.string,
|
|||
|
body: React.PropTypes.string
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Aqui estamos definindo que os dados passados para o nosso componente Blog serão strings para título e corpo. Confira [a documentação do React](https://reactjs.org/docs/typechecking-with-proptypes.html) para uma lista de todos os propTypes.
|
|||
|
|
|||
|
Agora vamos juntar isso em um componente de aplicativo e passar nossos dados.
|
|||
|
|
|||
|
```javascript
|
|||
|
const App = props => {
|
|||
|
return (
|
|||
|
<div>
|
|||
|
<Heading />
|
|||
|
<Blog title={blogData.title} body={blogData.body} />
|
|||
|
<Blog title={blogData.title} body={blogData.body} />
|
|||
|
<Blog title={blogData.title} body={blogData.body} />
|
|||
|
</div>
|
|||
|
);
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Finalmente, vamos renderizar nosso aplicativo (não se esqueça de adicionar uma tag raiz `<div>` ao arquivo HTML):
|
|||
|
|
|||
|
```javascript
|
|||
|
ReactDOM.render(
|
|||
|
<App />,
|
|||
|
document.getElementById('root')
|
|||
|
);
|
|||
|
```
|
|||
|
|
|||
|
Agora você deve ver nossos componentes do blog renderizados com os dados fictícios transmitidos via adereços.
|
|||
|
|
|||
|
Você pode ver um exemplo de CodePen [aqui](https://codepen.io/trey-davis/pen/MvdZGX) .
|