使用组件时收到错误消息

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设计的组件。

JSXVersion3是在ReasonReact 0.7.0中引入的，同时还提供了一种用于定义react组件的新方法，该方法支持钩子，但只要您将项目配置为使用JSXVersion2，它仍然支持您正在使用的方法。如果这是一个新项目，我建议您使用新的组件样式，您的代码将简单如下所示：

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

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

或者，您可以继续使用旧样式的组件和JSXversion2，方法是在bsconfig.json中指定以下内容

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

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