Fable: 将参数编译为 JS 对象的属性

创建于 2018-10-30 · 3评论 · 资料来源: fable-compiler/Fable

React 的新增功能（备忘录、钩子）表明社区将更多地将函数作为组件而不是类。这对我们来说是个好消息，因为 F# 中的类语法为此目的有点冗长。但是，我们仍然可以做一些事情来改善体验。

在 FableConf @vbfox建议启用一个属性来将参数编译为 JS 对象，这样我们就不需要每次要定义带有 props 的函数组件时都声明一条记录。所以而不是：

type MyProps = { key: string; value1: int; value2: float[] }

let MyComponent (props: MyProps) =
    div [] [...]

// Use
ofFunction MyComponent { key = "foo"; value1 = 5; value2 = [] } []

我们可以这样写：

let [<MagicAttribute>] MyComponent (key: string) (value1: int) (value2: float[]) () =
    div [] [...]

// Use?
ofFunction2 (MyComponent "foo" 5 []) []

我只是注意到我们忘了讨论如何调用它。在上面的示例中，我只是在末尾添加了一个单元参数以防止执行，但可能还有其他方法。

原则上，我想尽可能避免 F# 中的魔法属性，但在这种情况下它是合理的。另一种方法是等待匿名记录进入 F#。它们可能会解决这种情况，我们将与标准 F# 保持一致，而且它们似乎会在 F# 预览中出现。

discussion

资料来源

alfonsogarciacaro

最有用的评论

匿名记录仍然非常冗长：

// Declaration
let userView = namedMemo "User" (fun ({| UserId: string; Name: string |}) ->
    a [Href (sprintf "/%s/" props.UserId)] [str props.Name])

// Usage
ofElementType userView { UserId = "vbfox"; Name = "Julien Roncaglia" } []

正常记录：

// Declaration
type UserViewProps = { UserId: string; Name: string }
let userView = namedMemo "User" (fun props ->
    a [Href (sprintf "/%s/" props.UserId)] [str props.Name])

// Usage
ofElementType userView { UserId = "vbfox"; Name = "Julien Roncaglia" } []

但是我越是考虑我的提议，我就越发现它有问题......即使有这样一个原语，它也会允许功能组件工作，但不会像 memo 这样的包装组件，因为参数名称会从编译器中丢失:(： ( :(

我想你可以关闭这个@alfonsogarciacaro如果我找到解决这个问题的方法，我会重新打开一个...现在我们将创建记录或元组 XD

vbfox 于 2018-10-30

👍2 😄1

所有3条评论

另一种方法可能是等到匿名记录进入 F#

由于该问题已在 F# 部分解决，并且通过定义记录在 Fable 中已经有替代方案，我建议等到我们有匿名记录。否则你只会添加一个在不久的将来会被删除的功能，更不用说它必须被实现、测试、记录、添加一些示例，用户将需要学习他们的 Fable 怪癖武器库旁边的另一个属性做 javascripty 的事情

Zaid-Ajaj 于 2018-10-30

👍2

我赞成等待匿名 F# 记录

MangelMaxime 于 2018-10-30