将滚动元素反应到视图中

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中的引用，但是我不确定如何在这里应用它。假设有一种滚动到e的方法。 G。每个呈现的Month组件的键？

Answer 1

不需要复杂的Javascript代码的最佳答案就是这个问题的答案

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

您可以将其连接到react应用程序的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/