Как правильно использовать react component?

Question

[PlasterTom]

Подключаю react-masonry-infinite.
Базовое использование компонента выглядит так:

<MasonryInfiniteScroller
    hasMore={this.state.hasMore}
    loadMore={() => this.setState({ elements: this.state.elements.push("Element") })}
>
    {
        this.state.elements.map(id =>
            <div key={id} />
        )
    }
</MasonryInfiniteScroller>

Как должна выглядеть строка this.state.elements.map, если

const elements = [
{      
            id: 1,
            thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg",
            thumbnailWidth: 300,
            thumbnailHeight: 320
        },
        {   
            id: 2,
            thumbnail: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_n.jpg",
            thumbnailWidth: 320,
            thumbnailHeight: 190
        },
        {
             id: 3,
            thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg",
            thumbnailWidth: 320,
            thumbnailHeight: 148
        }, и т.д.
]

И так же непонятно, что нужно сделать со строкой loadMore={() => this.setState({ elements: this.state.elements.push("Element") })}
Что за "Element"?

Answer 1

[Антон Спирин]

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>
    ); 
  }
}

Тут как только вы пролистнете список

Comments

[PlasterTom]

Воу, огромное спасибо за подробный пример!