1

在我的带有 Elmish 的 Fable 应用程序中，我有一个使用react- slick 的视图和一个应该能够在单击时更改幻灯片编号的按钮：

Fable.Import.Slick.slider
  [ InitialSlide model.SlideNumber
    AfterChange (SlideTo >> dispatch) ]
  children

Button.button
  [ Button.OnClick (fun _ev -> dispatch (SlideTo 5)) ]
  [ str "Go to slide 5" ]

滑块的反应组件由 定义react-slick。
我必须自己编写的寓言包装器，所以它不完整，因为我只定义了我需要的属性。

module Fable.Import.Slick

open Fable.Core
open Fable.Core.JsInterop
open Fable.Helpers
open Fable.Helpers.React.Props
open Fable.Import.React

type SliderProps =
    | InitialSlide of int
    | AfterChange of (int -> unit)
    interface IHTMLProp

let slickStyles = importAll<obj> "slick-carousel/slick/slick.scss"
let slickThemeStyles = importAll<obj> "slick-carousel/slick/slick-theme.scss"
let Slider = importDefault<ComponentClass<obj>> "react-slick/lib/slider"
let slider (b: IHTMLProp list) c = React.from Slider (keyValueList CaseRules.LowerFirst b) c

因此，虽然react-slick定义了一个属性InitialSlide来设置最初应该显示的幻灯片，但没有属性可以在之后更新幻灯片。有一种方法slickGoTo可以做我想做的事。但我不知道如何或在哪里调用该方法，同时仍符合 Elmish。

我可以想象我必须扩展反应组件并监听模型属性，然后slickGoTo在该属性更改时调用。但我不知道这是否可能。

所以我的问题是：如何slickGoTo在不破解 Elmish 架构的情况下使用由组件定义的按钮来更改单击时的幻灯片编号？

4

3 回答 3

1

为了能够调用该方法slickGoTo，您需要获取对滑块对象的引用。为此，请使用Ref需要 type 函数的道具(Browser.Element -> unit)。它被调用一次。将该元素保存在某处，可能在您的模型中：

type Model = {
    ...
    slideNumber : int
    sliderRef   : Browser.Element option
    ...
}

let gotoSlide sliderRef n = 
    match sliderRef with None ->
    | None -> () 
    | Some slider -> slider?slickGoTo n

这样你就可以gotoSlide从你的更新函数中调用。

type Msg =
| SetSliderRef of Browser.Element
| CurrentSlide of int
| GotoSlide    of int
...

let update msg model =
    match msg with
    | SetSliderRef e -> { model with sliderRef   = Some e }  , []
    | CurrentSlide n -> { model with slideNumber = n      }  , []
    | GotoSlide    n -> gotoSlide model.sliderRef n ;   model, []
    ...

像这样创建幻灯片：

slider 
    [ Ref          (SetSliderRef >> dispatch) 
      AfterChange  (CurrentSlide >> dispatch)
      InitialSlide 0
    ]
    slides

我还没有测试过任何这些，所以带上一粒盐。

于 2019-01-13T12:06:36.583 回答
1

在模型中存储对滑块对象的引用的另一种方法是使用可变变量：

let mutable sliderRef   : Browser.Element option = None

let gotoSlide n = 
    match sliderRef with None ->
    | None -> () 
    | Some slider -> slider?slickGoTo n

其余类似：

type Msg =
| CurrentSlide of int
| GotoSlide    of int
...

let update msg model =
    match msg with
    | CurrentSlide n -> { model with slideNumber = n      }  , []
    | GotoSlide    n -> gotoSlide n ;                   model, []

像这样创建滑块：

slider 
    [ Ref          (fun slider = sliderRef <- Some slider) 
      AfterChange  (CurrentSlide >> dispatch)
      InitialSlide 0
    ]
    slides
于 2019-01-13T20:54:33.190 回答
0

我刚刚发现在 React 中你之前使用过解决了这些问题componentWillReceiveProps——这听起来很像我想要的 IMO。但这现在已经过时了，根据我的用法有两个建议：

如果您在 prop 更改时使用 componentWillReceiveProps 来“重置”某些状态，请考虑使用键使组件完全受控或完全不受控制。

我认为我无法实现该Fully controlled版本（这必须由组件的作者完成，对吗？），但fully uncontrolled with a key似乎可行。所以我的滑块视图现在看起来像这样：

Fable.Import.Slick.slider
    [ InitialSlide model.SlideNumber
      AfterChange (SlideTo >> dispatch)
      Key (string model.SlideNumber) ]

根据文档，每次Key更改时，都会重新创建组件。现在这听起来像很多开销并且有其自身的缺点（动画幻灯片不起作用）但目前它是最简单的解决方案。有什么顾虑吗？

于 2019-01-13T19:06:55.157 回答