如何在JavaScript中使用ReScript材料设计库？

Question

我正在尝试使用图书馆在一个转录/反应应用程序。下面的代码将显示一个按钮：

@module("@material-ui/core/Button") external button: string = "default"

@react.component
let make = () => {
     <button > {React.string("Hello")} </button>
}

显示的按钮是基本的，我不能更改基本属性，如variant="contained"或color="primary"，因为它们没有被识别。我试图将第一行中的string类型更改为TypeScript @material-ui/core/Button文件中的类型，但没有工作。我试着使用%%raw()和%raw()，但它们非常有限。我无法处理它们返回的对象，因为ReScript不知道它们的类型。此外，我无法在React.useEffect()函数中使用%raw() (因为它不返回任何内容)调用make。

在TypeScript中，我可以使用对象和调用函数，而不需要有关它们的类型信息。

是否有一种方法可以在ReScript中做同样的事情，或者我是否必须自己添加所有的输入信息(如果我想使用库)？

Answer 1

你不能像我们在打字稿中那样直接使用库。Rescript有一个非常强的类型系统，并且没有any类型。

您可以将此库https://www.npmjs.com/package/@jsiebern/bs-material-ui用于Rescript材料ui绑定。您可以检查绑定或转录库这里。只有当已经没有可用的绑定时，您才需要编写它。

Answer 2

绑定签名不正确。试试这个：

module Button = {
  @module("@material-ui/core/Button") @react.component
  external make: (~variant=option<[ | #outline | #contained ]>=?, ~children) => React.element = "default"
}


@react.component
let make = () => {
     <Button variant=#outline> {React.string("Hello")} </Button>
}

Answer 3

这里您可以找到资料-ui的绑定。这里你可以找到github回购公司

rescript-material-ui为基于Javascript的UI库MUI (以前为MaterialUi)提供了ReScript绑定。绑定是通过使用原始包的文档生成脚本自动生成的。它们依赖于代码和代码注释的混合，而且并不总是100%的精确性。这将直接转化为绑定。如果您在组件上遇到丢失的道具或行为不当的组件，请随时打开问题。