reactjs - 在 Fable/Elmish 中使用第三方 React 组件

Question

我正在尝试整合 Carbon Design System - React SDK在寓言/Elmish 应用程序中，看起来我必须创建 property type definitions (其中一些我只是猜测)用于每个组件以便使用它。
组件已经has TypeScript definitions在。

我真的必须为我想尝试或使用的每个 React 组件手动创建类型定义吗？
是否有一种简单或自动的方法可以从 F# 代码中使用 React 组件，而不必为我想尝试的每个组件编写属性类型定义？
F# 社区中的人们如何使用 React 生态系统中的组件？

我试过 ts2fable但它会生成无效的不可靠代码:Example大多数行都有错误，我还转译了依赖项(typings/shared.d.ts 和 React 类型定义)
我也在看TypeProviders但不确定这是否可以解决我的问题。

Answer 1

Do I really have to manually create type definitions for every React component I want to try or use?

您不必创建类型定义。相反，您可以使用 Fable 提供的动态模块编写非类型安全的 F# 代码。

Is there a simple or automatic way to use a React component from F# code without having to write the property type definitions for every component I want to try?

目前有(不完美的)ts2fable 工具，或者您可以编写无类型的 F# 代码，注意输出将在 JavaScript 中具有正确的“形状”。

How do people in the F# community use the components from the React ecosystem?

一些常用库具有可在 Nuget 上使用的 F# 绑定(bind)。否则，您将需要自己编写一些绑定(bind)，也许使用 ts2fable。
这绝对是 Fable 目前的痛点。

例如，假设 JavaScript 库需要一个像这样的 props 对象:

{
  foo: 1,
  bar: [ "a", "b", "c" ],
  qux: "hello"
}

然后我们可以像这样在 Fable 中创建它:

open Fable
open Fable.Core
open Fable.Core.JsInterop

let props = 
  createObj [
    "foo" ==> 1
    "bar" ==> ResizeArray<_>([ "a"; "b"; "c" ])
    "qux" ==> "hello"
  ]

编译成...

export const props = {
    foo: 1,
    bar: ["a", "b", "c"],
    qux: "hello",
};

props的F#类型是 obj . ==>运营商只是为了方便。你也可以这样写:

open Fable
open Fable.Core
open Fable.Core.JsInterop

let props = 
  createObj [
    "foo", box 1
    "bar", box (ResizeArray<_>([ "a"; "b"; "c" ]))
    "qux", box "hello"
  ]

这非常适合尝试。但是，您将错过 F# 的一些强类型优势!这种权衡是否值得取决于您的用例。

理论上，可以编写一个类型提供程序，它接受一个 NPM 模块名称并返回一个适当的 F# 类型，也许利用 ts2fable。这将非常强大，但我认为还没有人实现过。