ReasonReact类型不匹配报错：actElement相关问题如何解决？

我来帮你搞定这个问题，先从错误提示说起：

你看到的actElement其实是Reason/Bucklescript编译器的一个拼写小失误，它实际想表达的是reactElement——意思是编译器期望接收一个标准的React元素，但你传入的值类型不对，导致了类型不匹配。

问题根源 #

你的ShowHide组件已经正确定义了make函数，但在使用时没有正确引用组件的构造逻辑：

• 在ReasonReact中，组件的JSX语法依赖于模块里的make函数来生成React元素
• 如果你没有把make设为模块的默认导出，直接写<ShowHide name="hello" />是错误的——因为ShowHide是模块本身，不是组件构造函数，类型自然不匹配

两种解决办法 #

办法一：把make设为组件模块的默认导出

在你的ShowHide.re文件末尾添加一行代码，将make设为默认导出：

let default = make;

修改后，你在app.re里原来的渲染代码就能正常工作了：

ReactDOMRe.renderToElementWithId(<ShowHide name="hello" />, "RenderShowHide")

办法二：在使用组件时显式调用make函数

如果不想修改组件文件，直接在app.re里调整渲染代码，显式引用模块的make函数：

ReactDOMRe.renderToElementWithId(<ShowHide.make name="hello" />, "RenderShowHide")

额外小提示 #

你的组件render函数里目前是空的<div>，没有渲染拼接好的greeting字符串，记得修改成这样才能看到内容：

render: (self) => {
  let greeting =
    "Hello: " ++ name ++ ". You've clicked the button " ++ string_of_int(self.state) ++ " time(s)!";
  <div>{ReasonReact.string(greeting)}</div>
}

ReasonReact中渲染字符串需要用ReasonReact.string()包裹，不然编译器也会报错哦。

按照上面的方法修改后，类型不匹配的错误就会消失，组件也能正常渲染到id="RenderShowHide"的DOM元素里了。

内容的提问来源于stack exchange，提问作者Charlie-Greenman