107 lines
4.7 KiB
Markdown
107 lines
4.7 KiB
Markdown
---
|
||
title: Handling Data with Props in React
|
||
localeTitle: Обработка данных с помощью Props в React
|
||
---
|
||
## Обработка данных с помощью Props в React
|
||
|
||
Props обеспечивают способ передачи и доступа к данным в компонентах React.
|
||
|
||
Данные передаются для компонентов React как атрибут в JSX.
|
||
|
||
```javascript
|
||
<MyComponent someAttribute={data.value} />
|
||
```
|
||
|
||
В JSX фигурные скобки указывают на выражение JavaScript, которое должно возвращать значение. Переданные данные доступны через props в определенном компоненте.
|
||
|
||
```javascript
|
||
const MyComponent = props => {
|
||
<p>{props.someAttribute}</p>
|
||
};
|
||
```
|
||
|
||
Теперь давайте рассмотрим пример в CodePen.
|
||
|
||
### Установка
|
||
|
||
Если вы еще этого не сделали, зайдите и зарегистрируйтесь на [бесплатной учетной записи CodePen](https://codepen.io/accounts/signup/user/free) .
|
||
|
||
Создайте новый pen, выбрав 'Create' > 'New Pen' рядом с вашим профилем CodePen.
|
||
|
||
Затем мы добавим соответствующие библиотеки для рендеринга наших компонентов React.
|
||
|
||
Откройте панель настроек JavaScript, выбрав 'Settings' > 'JavaScript. Выберите 'Babel' в разделе 'JavaScript Preprocessor'.
|
||
|
||
Затем добавим наши библиотеки React. В разделе 'External JavaScript' выберите раскрывающийся список 'Quick-add' и добавьте библиотеки 'React' и 'React DOM'.
|
||
|
||
### Использование props
|
||
|
||
Сначала давайте определим некоторые фиктивные данные в нашем файле JavaScript.
|
||
|
||
```javascript
|
||
const blogData = {
|
||
title: 'My blog title',
|
||
body: 'Arcu viverra dolor eros interdum, quis nonummy accusantium at lorem luctus iaculis.'
|
||
};
|
||
```
|
||
|
||
Затем определим наши компоненты блога.
|
||
|
||
```javascript
|
||
const Heading = () => {
|
||
return (
|
||
<h1>My Blog</h1>
|
||
);
|
||
};
|
||
|
||
const Blog = props => {
|
||
return (
|
||
<div>
|
||
<h2>{props.title}</h2>
|
||
<p>{props.body}</p>
|
||
</div>
|
||
);
|
||
};
|
||
```
|
||
|
||
Заметил, как мы использовали объект props для рендеринга значений заголовка и тела, которые будут переданы компоненту Blog. Props доступны только для чтения или неизменяемы, поэтому нам не нужно беспокоиться об изменении значений props.
|
||
|
||
Перед тем, как написать наш компонент App, мы должны защитить наш компонент будет определение типа переменной, которая передается каждому props. Мы определим это с помощью React.PropTypes. Добавьте в свой файл JavaScript следующее.
|
||
|
||
```javascript
|
||
Blog.propTypes = {
|
||
title: React.PropTypes.string,
|
||
body: React.PropTypes.string
|
||
};
|
||
```
|
||
|
||
Здесь мы определяем, что данные, переданные нашему компоненту Blog, будут строками для заголовка и тела. Ознакомьтесь с [документацией React](https://reactjs.org/docs/typechecking-with-proptypes.html) для списка всех propTypes.
|
||
|
||
Теперь давайте сделаем это вместе в компоненте приложения и передадим наши данные.
|
||
|
||
```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>
|
||
);
|
||
};
|
||
```
|
||
|
||
Наконец, давайте отрисуем наше приложение (обязательно добавьте тэг root `<div>` в HTML-файл):
|
||
|
||
```javascript
|
||
ReactDOM.render(
|
||
<App />,
|
||
document.getElementById('root')
|
||
);
|
||
```
|
||
|
||
Теперь вы должны увидеть, что наши компоненты блога визуализируются с помощью фиктивных данных, передаваемых через props.
|
||
|
||
Вы можете увидеть пример CodePen [здесь](https://codepen.io/trey-davis/pen/MvdZGX) .
|