Всем привет. В этом уроке мы познакомимся с вторым типом данных в React. Они называются props. Когда нам нужно пробросить какие-то данные из парент компонент в чайлд, то мы используем props.
Давайте попробуем. И у нас будет вполне реальный пример. Мы будем делать хедер с меню.
Создадим новый файл Header.js и скопируем в него App.js и немножко изменим.
import React, { Component } from 'react';
class Header extends Component {
render() {
return (
<div>
Header
</div>
);
}
}
export default Header;
Импортируем его в App.js. Заодно удалим Dropdown. И вставим Header вместо Dropdown.
import React, { Component } from 'react';
import Header from './Header';
class App extends Component {
render() {
return (
<div>
<Header />
</div>
);
}
}
export default App;
Как мы видим в браузере вывелось слово header. Все нормально работает и компонент отрендерился.
Теперь давайте представим, что мы получаем ссылки для меню от бекенда. Хорошей практикой считается делать один умный компонент на страницу и вкладывать в него тупые компоненты. При условии, что уровень вложености не очень глубокий. Умный компонент может получать данные например от бекенда, а тупые просто получают данные от парента, которые им пробросили и что-то рендерят.
Давайте сделаем наш App умным, а Header и его чайл компоненты тупыми.
Создадим в App массив тестовых данных, как будто мы получили их с бекенда. Создадим меню, которое будет массив обьектов.
const menu = [
{
link: '/articles',
label: 'Articles'
},
{
link: '/contacts',
label: 'Contacts'
},
{
link: '/posts',
label: 'Posts'
}
];
Теперь пробросим их как параметр в Header. Для этого мы просто указываем атрибут items в значением menu.
<Header items={menu} />
Теперь для того, чтобы работать с ними в Header нужно использовать this.props. Давайте напишем console.log в рендер методе
console.log('items', this.props.items);
Как мы видим в консоли вывелся наш массив. И теперь мы можем их рендерить обычным мапом. И это будет выглядеть вот так.
{this.props.items.map((item, index) =>
<a href={item.link}>{item.label}</a>
)}
Если мы посмотрим в браузер то увидим, что наш массив отрендерился, но у нас есть Warning
warning.js:36 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Header`.
Он говорит, что каждый елемент внутри массива должен иметь уникальный ключ. Поэтому давайте добавим атрибут key.
{this.props.items.map((item, index) =>
<a href={item.link} key={index}>{item.label}</a>
)}
Теперь никаких ошибок нет и наши ссылки зарендерились. Если вы хотите пробросить какие-то данные из парент компонента, например, как мы пробрасывали из App в Header, то для этого вам нужно использовать props.