react-slick - 将 React-Slick 与查询参数同步

Question

我正在使用 React-Slick<Report />在轮播中渲染组件。我想将每个<Report />'sreportId与查询参数同步。

例如，用户将能够通过转到查看特定报告，myapp.com/reports?id=1并将其带到该特定“幻灯片”。

我遇到的问题是report在幻灯片初始化之前加载数据。我找不到 react-slickonInit或onReInit.

Answer 1

我没有使用onInitor onReInit，而是使用了initialSlide设置并使用了componentDidUpdate()。

componentDidUpdate = (prevProps, prevState) => {

const queryParams = qs.parse(this.props.location.search)
if (prevProps.reports !== this.props.reports) {
  const sortedReports = this.sortReportsByDate(this.props.reports)

  this.setSlideIndex(sortedReports.findIndex(i => i.id === parseInt(queryParams.reportId, 10)))
  this.setQueryParams({
    reportId: this.sortReportsByDate(this.props.reports)[this.state.slideIndex].id
  })
}

if (prevState.slideIndex !== this.state.slideIndex) {
  this.setQueryParams({
    reportId: this.sortReportsByDate(this.props.reports)[this.state.slideIndex].id
  })
}

}

和设置：

const settings = {
  ...
  initialSlide: reportsSortedByDate.findIndex(i => i.id === parseInt(queryParams.reportId, 10))
  ...
}

我希望有人觉得这很有用！