将 React-Slick 与查询参数同步

Posted 2023-02-25

【中文标题】将 React-Slick 与查询参数同步

【英文标题】：Syncing React-Slick with Query Params

【发布时间】：2019-02-12 18:18:37

【问题描述】：

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

例如，用户可以通过转到myapp.com/reports?id=1 来查看特定报告，然后他们会转到该特定“幻灯片”。

我遇到的问题是在初始化幻灯片之前加载了 report 数据。我找不到任何 react-slick 的 onInit 或 onReInit 的好例子。

【参考方案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))
  ...

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