1. Функция
map превращает в колбеке элемент вашего массива данных в
JSX код описывающий элемент и на выходе выдает массив таких элементов. Это лучший и общепринятый способ рендерить списки в
react.
Банальный пример:
const employees = ['Bill', 'Matt', 'Sarah'];
return (
<ul>
{employees.map((employee, i) => (
<li key={i}>employee</li>
)}
<ul>
);
Результат:
<ul>
<li>Bill</li>
<li>Matt</li>
<li>Sarah</li>
</ul>
2. "Element" как видите строка. Тут разработчики просто пушат в массив строку, но в идеале тут должна вызываться функция иницирующая запрос к серверу.
Вот более приближенный к жизни пример:
class Example extends Component {
state = {
elements: [],
page: 1,
limit: 20,
total: 0,
isLoading: false,
isError: false,
};
componentDidMount() {
this.loadThumbnails();
}
loadThumbnails = () => {
const { page, limit } = this.state;
this.setState({
isLoading: true,
isError: false,
}, () => {
axios.get(
`api/somePath?limit=${limit}&page=${page + 1}`
).then(response => {
const { data: { elements, total } } = response;
this.setState(prevState => ({
elements: [
...prevState.elements,
...elements
],
page: page + 1,
isLoading: false,
total,
}));
}).catch(error => {
this.setState({
isLoading: false,
isError: true,
});
});
});
};
render() {
const {
elements,
page,
limit,
total,
isLoading,
} = this.state;
const hasMore = page * limit < total;
return(
<MasonryInfiniteScroller
hasMore={hasMore}
loadMore={this.loadThumbnails}
>
{elements.map(element => (
<img
key={element.id}
src={element.thumbnail}
style={{
width: element.width + 'px',
height: element.height + 'px',
}}
/>
)}
{isLoading && <div>...Loading</div>}
{isError && (
<div>
Can't load data. Please, check your internet connection.
<button onClick={this.loadThumbnails}>
Try again
</button>
</div>
)}
</MasonryInfiniteScroller>
);
}
}
Тут как только вы пролистнете список
