Реагировать на элемент прокрутки

Question

Я выполняю рендеринг компонента календаря, который снова выполняет рендеринг компонента Month на основе массива months:

{
  months.map(month =>
   <div style={{marginBottom: "35px"}} key={month}>
     <Month
       monthName={this.renderMonthName(month)}
       daysOfMonth={Object.keys(calendarDays).filter(day => new Date(day).getMonth() === month)}
       calendarDays={calendarDays}
       year={this.state.year}
     />
   </div>
  )
}

В результате получается длинный список отдельных месяцев:

Однако я хочу, чтобы после рендеринга компонента календаря он прокручивался до текущего месяца (в противном случае пользователям придется прокручивать вручную до текущего месяца)..

Я знаю о ссылках в React, но я не уверен, как это применить здесь.Есть ли способ прокрутить, скажем, до ключа каждого визуализированного Month компонента?

Answer 1

Лучший ответ, который не нуждается в мельчайших деталях. Javascript код - это ответ на этот вопрос

https://stackoverflow.com/a/49842367/3867490

Вы можете подключить его через ловушку componentDidMount вашего приложения реакции, чтобызапускается только при монтировании компонента.

Код здесь, может быть уродливым, но вы можете понять идею здесь.

class Hello extends React.Component {
    constructor(props){
    super(props);
    this.IsCurrentMonth = this.IsCurrentMonth.bind(this);
    this.ScrollToCurrentMonth = this.ScrollToCurrentMonth.bind(this);
        this.state = {
        months: ['January', 'February','March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December'],
      currentMonth :  new Date().getMonth(),
    }  
  }

  componentDidMount(){
    this.ScrollToCurrentMonth();
  }
  IsCurrentMonth(toCompare){
    if(this.state.currentMonth === toCompare){
        return 'calendar_active';
    }
    return;

  }

  ScrollToCurrentMonth(){
  var myElement = document.getElementsByClassName('calendar_active')[0];
    const y = myElement.getBoundingClientRect().top + window.scrollY;
window.scroll({
  top: y,
  behavior: 'smooth'
});  

  }

  render() {
    return (
    <div className={this.state.currentMonth}>
    {
    this.state.months.map((month, index) =>{

            return <div className={`month ${this.IsCurrentMonth(index)}`  }>{month}</div>
    })


    }

</div>

    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

См. рабочую скрипку здесь https://jsfiddle.net/keysl183/f9ohzymd/31/