使用组件时收到错误消息

Question

我正在使用 ReasonReact 创建网站，但在使用普通组件时遇到此错误消息。有谁知道发生了什么事吗？

module Component1 = {
  let component = ReasonReact.statelessComponent("Component1");
  let make = () => {...component, render: self => <div />};
};

module Component2 = {
  let component = ReasonReact.statelessComponent("Component1");
  let make = () => {
    ...component,
    render: self => <div> <Component1 /></div>, /*error on compenent1*/ 
  };

错误信息如下：


(
  React.component('props),
  'props
) => React.element
<root>/node_modules/reason-react/src/React.re

Error: This expression has type
         unit =>
         ReasonReact.componentSpec(ReasonReact.stateless,
                                    ReasonReact.stateless,
                                    ReasonReact.noRetainedProps,
                                    ReasonReact.noRetainedProps,
                                    ReasonReact.actionless)
       but an expression was expected of type
         React.component(unit) = unit => React.element
       Type
         ReasonReact.componentSpec(ReasonReact.stateless,
                                    ReasonReact.stateless,
                                    ReasonReact.noRetainedProps,
                                    ReasonReact.noRetainedProps,
                                    ReasonReact.actionless)
       is not compatible with type React.element

Answer 1

问题似乎是您使用的项目配置为使用 JSX 版本 3 和为 JSX 版本 2 设计的组件。

ReasonReact 0.7.0 中引入了 JSX 版本 3，以及定义支持钩子的 React 组件的新方法，但只要您将项目配置为使用 JSX 版本 2，它仍然支持您正在使用的方法. 如果这是一个新项目，我会推荐使用新的组件样式，你的代码看起来像这样：

module Component1 = {
  [@react.component]
  let make = () =>
    <div />;
};

module Component2 = {
  [@react.component]
  let make = () =>
    <div> <Component1 /> </div>;
};

或者，您可以通过在 bsconfig.json 中指定以下内容来继续使用组件的旧样式和 JSX 版本 2：

{
  ...
  "reason": {"react-jsx": 2}
}

有关详细信息，请参阅 the blog post on ReasonReact 0.7.0。

使用组件时收到错误消息

received error message when using component

reason

reason-react