Question

我正在使用React-Slick在转盘中渲染<Report />组件。我想将每个<Report />的{{1}}与查询参数同步。

例如，用户将可以通过转到reportId来查看特定的报告，并将其带到该特定的“幻灯片”。

我遇到的问题是在初始化幻灯片之前正在加载myapp.com/reports?id=1数据。我找不到任何好玩的react-slick的report或onInit的例子。

Answer 1

我没有使用onInit或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))
  ...
}

我希望有人觉得这有用！

将React-Slick与查询参数同步

1 个答案: