Как сделать скролл на список?

Question

[kentos]

Как сделать скролл на список?

import React, { Component } from 'react'
import { Form, FormGroup, Label, Input, ListGroup, ListGroupItem } from 'reactstrap'
import './Search.css'

class Search extends Component {
  render() {
    const { onToggleOpen, onInputChanged, places } = this.props;

    this.renderPlaces = place => {
      return (<ListGroupItem className={ 'nav-option hover-option' } cursor={ 'pointer' } key={ place.id } onClick={ () => onToggleOpen(place.id, true) }>{ place.commonName }</ListGroupItem>)
    }

    this.onChange = event => {
      onInputChanged(event.target.value.trim())
    }

    return (
      <div>
        <br/>
        <Label>Выберите место или выберите из предложенных.</Label>
        <Input onChange = { this.onChange.bind(this) }/>
// Выводится список
        <ListGroup>
          { places.slice().map(this.renderPlaces) }
        </ListGroup>
    </div>
    );
  }
}

export default Search;

Comments

[kentos]

Чтобы выводилось определённое кол-во, но можно скролить и выбрать любое место

[Роман Александрович]

kentos, а щас как выглядит? нельзя вывести много элементов? разве не появляется скрол сбоку при большом количестве итемов?

[kentos]

Роман Александрович, вот на хосте он Тык

Answer 1

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

react-window
react-virtualized
Если размер списка ожидается не большой и оптимизация производительности не нужна, то за глаза хватит любого кастомного скролла.

Comments

[kentos]

У меня их 743

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

kentos, Тогда сходите по ссылкам в ответе и выбирайте, что больше нравится.