我是寓言的新手。我需要將此 html 代碼（這只是一個簡化的示例，順便說一句不是我的）轉換為 Fable.React 語法。
<div id="templatemo_header">
<div id="site_title">
<h1>
<a href="/"><img src="/Content/images/templatemo_logo.png" /></a>
</h1>
</div>
</div> <!-- end of header -->
<div>
<div id="templatemo_menu">
<ul>
<li><a class="current" href="/">Some text</a></li>
</ul>
</div> <!-- end of templatemo_menu -->
<div id="templatemo_main">
<div id="templatemo_content">
<p id="3">
Some text......
</p>
</div> <!-- end of content -->
</div> <!-- end of main-->
</div>
我可以借助此轉換器將 html 代碼轉換為 Elmish 代碼，但是如何將生成的代碼調整為 Fable.React？你知道我可以研究的任何例子嗎？到目前為止，我還沒有找到任何東西。大概 id 應該是 Props.Id，class 應該是 Props.Class 等等。在哪里可以找到合適的語法和縮進？
open Fable.React
let view (model: Model) (dispatch: Msg -> unit) =
div [ Props.Id "templatemo_header" ]
[ div [ Props.Id "site_title" ]
[ h1 []
[ a [ Props.Href "/" ]
[ img [ Props.Src "/Content/images/templatemo_logo.png" ]
[]
]
]
]
]
, div [] //the comma here looks like a problem
[ div [ Props.Id "templatemo_menu" ]
[ ul []
[ li []
//The comma in the <a> tag looks like a problem
//Or maybe having more than one attribute is a problem
[ a [ Props.Class "current", Props.Href "/" ]
[ text "Some text" ] //text seems to be a problem
]
]
]
, div [ Props.Id "templatemo_main" ]
[ div [ Props.Id "templatemo_content" ]
[ p [ Props.Id "3" ]
[ text "Some text......" ]
]
]
]
轉換后的代碼不起作用（正如我所料）。我收到諸如“ Error FS0003 This value is not a function and cannot be applied ”之類的錯誤訊息。
順便說一句，我確實找到了如何手動將 html 代碼轉換為 Feliz 的示例（更少的串列 - 代碼看起來更好），但是手動重寫我收到的整個第三方 html 代碼對我來說是不可能的。
uj5u.com熱心網友回復：
我認為您正在尋找Feliz語法，該語法在The Elmish Book中有很好的記錄。您的第一個快速翻譯div如下所示：
open Feliz
Html.div [
prop.id "templatemo_header"
prop.children [
Html.h1 [
Html.a [
prop.href "/"
prop.children [
Html.img [
prop.src "/Content/images/templatemo_logo.png"
]
]
]
]
]
]
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/528297.html
標籤：反应式F＃寓言-f#寓言