Реагировать списки
В React вы будете отображать списки с некоторым циклом.
map()Метод массива JavaScript обычно является предпочтительным методом.
Если вам нужно освежить в памяти этот map()метод, ознакомьтесь с
разделом ES6 .
Пример:
Давайте визуализируем все автомобили из нашего гаража:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Когда вы запустите этот код в своем create-react-app, он будет работать, но вы получите предупреждение о том, что для элементов списка не предоставлен «ключ».
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Ключи
Ключи позволяют React отслеживать элементы. Таким образом, если элемент обновляется или удаляется, будет повторно отображаться только этот элемент, а не весь список.
Ключи должны быть уникальными для каждого брата. Но их можно дублировать глобально.
Как правило, ключ должен быть уникальным идентификатором, присвоенным каждому элементу. В крайнем случае вы можете использовать индекс массива в качестве ключа.
Пример:
Давайте реорганизуем наш предыдущий пример, чтобы включить ключи:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));