106 lines
4.9 KiB
Markdown
106 lines
4.9 KiB
Markdown
|
---
|
|||
|
title: Handling Data with Props in React
|
|||
|
localeTitle: Обработка данных с помощью реквизита в действии
|
|||
|
---
|
|||
|
## Обработка данных с помощью реквизита в действии
|
|||
|
|
|||
|
Реквизиты обеспечивают способ передачи и доступа к данным в компонентах React.
|
|||
|
|
|||
|
Данные передаются для компонентов React как атрибут в JSX.
|
|||
|
|
|||
|
```javascript
|
|||
|
<MyComponent someAttribute={data.value} />
|
|||
|
```
|
|||
|
|
|||
|
В JSX фигурные скобки указывают на выражение JavaScript, которое должно возвращать значение. Переданные данные доступны через реквизиты в определенном компоненте.
|
|||
|
|
|||
|
```javascript
|
|||
|
const MyComponent = props => {
|
|||
|
<p>{props.someAttribute}</p>
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Теперь давайте рассмотрим пример в CodePen.
|
|||
|
|
|||
|
### Начиная
|
|||
|
|
|||
|
Если вы еще этого не сделали, зайдите и зарегистрируйтесь для [бесплатной учетной записи CodePen](https://codepen.io/accounts/signup/user/free) .
|
|||
|
|
|||
|
Создайте новое перо, выбрав «Создать»> «Новая пера» рядом с вашим профилем профиля CodePen.
|
|||
|
|
|||
|
Затем мы добавим соответствующие библиотеки для рендеринга наших компонентов React.
|
|||
|
|
|||
|
Откройте панель настроек JavaScript, выбрав «Настройки»> «JavaScript». Выберите «Babel» в разделе «Препроцессор JavaScript».
|
|||
|
|
|||
|
Затем добавим наши библиотеки React. В разделе «Внешний JavaScript» выберите раскрывающийся список «Быстрое добавление» и добавьте библиотеки «React» и «React DOM».
|
|||
|
|
|||
|
### Использование реквизита
|
|||
|
|
|||
|
Сначала давайте определим некоторые фиктивные данные в нашем файле 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>
|
|||
|
);
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Заметил, как мы использовали объект реквизита для рендеринга значений заголовка и тела, которые будут переданы компоненту Blog. Реквизиты доступны только для чтения или неизменяемы, поэтому нам не нужно беспокоиться об изменении значений реквизита.
|
|||
|
|
|||
|
Перед тем, как написать наш компонент App, мы должны защитить наш компонент будет определение типа переменной, которая передается каждому реквизита. Мы определим это с помощью 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')
|
|||
|
);
|
|||
|
```
|
|||
|
|
|||
|
Теперь вы должны видеть, что наши компоненты блога визуализируются с помощью фиктивных данных, передаваемых через реквизиты.
|
|||
|
|
|||
|
Вы можете увидеть пример CodePen [здесь](https://codepen.io/trey-davis/pen/MvdZGX) .
|