Listy reakcji
W React wyrenderujesz listy z jakimś rodzajem pętli.
Metoda tablicowa JavaScript map()jest ogólnie preferowaną metodą.
Jeśli potrzebujesz odświeżenia map()metody, zapoznaj się z
sekcją ES6 .
Przykład:
Wyrenderujmy wszystkie samochody z naszego garażu:
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'));
Kiedy uruchomisz ten kod w swoim create-react-app, zadziała, ale otrzymasz ostrzeżenie, że dla elementów listy nie ma żadnego „klucza”.
Zostać certyfikowanym!
95 $ ZAPISZ
Klucze
Klawisze pozwalają Reactowi śledzić elementy. W ten sposób, jeśli element zostanie zaktualizowany lub usunięty, tylko ten element zostanie ponownie wyrenderowany, a nie cała lista.
Klucze muszą być unikalne dla każdego rodzeństwa. Ale można je duplikować globalnie.
Zasadniczo klucz powinien być unikalnym identyfikatorem przypisanym do każdego elementu. W ostateczności możesz użyć indeksu tablicy jako klucza.
Przykład:
Zrefaktoryzujmy nasz poprzedni przykład, aby uwzględnić klucze:
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'));