我创建了一个应用程序，它下载一些数据并使用 Google Charts 将其绘制到 div与特定 Id .
这在静态页面上工作正常。但是，当使用菜单在多个 View 之间切换时，我在切换回适当的 View 时很难重新绘制图表。
如果我在模型更新时使用命令重绘图表，请求将失败，因为特定的 div尚未呈现。
有没有办法在 View 时触发命令Model-View-Update的舞台已经完成？或者重新绘制图表的更好方法？
示例代码如下(不可运行，但应该很容易理解)。单击“获取数据”按钮工作正常，但如果您随后切换到另一个页面并返回，我找不到再次绘制图表的方法。
module Client
open Elmish
open Elmish.React
open Fable.Helpers.React
open Fable.Helpers.React.Props
open Fulma
type View = ShowChart | NoChart
type Model = { View: View; Values: float[] option }
type Msg =
| RequestValues
| ReceiveValues of float[]
| PageWithChart
| PageWithoutChart
| DrawChart
let init () : Model * Cmd<Msg> =
{ View = ShowChart; Values = None }, []
let update (msg : Msg) (currentModel : Model) : Model * Cmd<Msg> =
match msg with
| RequestValues -> currentModel, Cmd.ofMsg (ReceiveValues [| 1.0; 3.0; 2.0 |]) // normally this would be a long-running process
| ReceiveValues values -> { currentModel with Values = Some values }, Cmd.ofMsg DrawChart
| DrawChart ->
match currentModel.Values with
| Some values ->
let series = TheGamma.Series.series<_, _>.values values
let chart = TheGamma.GoogleCharts.chart.line series
TheGamma.GoogleCharts.chart.show chart "Chart1"
| None -> ()
currentModel, []
| PageWithChart ->
match currentModel.Values with
| Some _ -> { currentModel with View = ShowChart }, Cmd.ofMsg DrawChart // FAILS as the div with Id="Chart1" does not exist yet
| None -> { currentModel with View = ShowChart }, []
| PageWithoutChart -> { currentModel with View = NoChart }, []
let button txt onClick =
Button.button
[ Button.OnClick onClick ]
[ str txt ]
let view (model : Model) (dispatch : Msg -> unit) =
match model.View with
| NoChart ->
div []
[ div [] [ str "Page without chart" ]
button "Show page with chart" (fun _ -> dispatch PageWithChart) ]
| ShowChart ->
div []
[ div [] [ str "Page with chart" ]
button "Get data" (fun _ -> dispatch RequestValues)
button "Show page without chart" (fun _ -> dispatch PageWithoutChart )
div [ Id "Chart1" ] [] ]
#if DEBUG
open Elmish.Debug
open Elmish.HMR
#endif
Program.mkProgram init update view
#if DEBUG
|> Program.withConsoleTrace
|> Program.withHMR
#endif
|> Program.withReact "elmish-app"
|> Program.run
HTML只是:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<title>SAFE Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="/Images/safe_favicon.png"/>
</head>
<body>
<div id="elmish-app"></div>
<script src="./js/bundle.js"></script>
</body>
</html>
最佳答案
您可以使用 Ref 检测何时安装了无状态 react 元素。属性。
例如，这是我在我的生产应用程序中使用的:
div [ Id "Chart1"
Ref (fun element ->
// Ref is trigger with null once for stateless element so we need to wait for the second trigger
if not (isNull element) then
// The div has been mounted check if this is the first time
if model.IsJustLoaded then
// This is the first time, we can trigger a draw
dispatch DrawChart
)
]
[ ]
另一种方法是转换
div [ Id "Chart1" ] [ ]进入有状态的 react 组件并在 componentDidMount 时触发平局已被调用。
关于f# - 在 fable-elmish 中，如何在渲染 View 后触发命令？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52669221/