从 aws-amplify 绑定到高阶组件

Question

bucklescript 正在寻找什么来满足以下示例产生的 Functions are not valid as a React child. 错误。

我从 aws-amplify-react.

绑定到 withAuthenticator

[@bs.deriving abstract]
type props = {
  [@bs.as "Comp"]
  comp: React.element,
  [@bs.optional] includeGreetings: bool,
};

[@genType.import ("aws-amplify-react", "withAuthenticator")] [@react.component]
external make:(
    ~props:props,
  ) => React.element = "withAuthenticator";
let default = make;

在Demo.re中我使用绑定如下：

let props = {
  WithAuthenticator.props(
    ~comp={
      <App />;
    },
    ~includeGreetings=true,
    (),
  );
};
Js.log(props);
[@react.component]
let app = () => <WithAuthenticator props />;

然后在 App.js 我使用 Demo.re 像这样：

import Amplify from 'aws-amplify';
import {app as App } from './Demo.bs';
import awsconfig from './aws-exports';
import './App.css';
Amplify.configure(awsconfig);

export default App;

这会产生以下错误：

 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in withAuthenticator (created by Demo$app)
    in Demo$app (at src/index.js:7)

我想了解一下这是什么意思，以便再次出现时进行处理。

这是Demo.bs.js中编译的bucklescript代码：

// Generated by BUCKLESCRIPT, PLEASE EDIT WITH CARE
'use strict';

var React = require("react");
var App$ReactHooksTemplate = require("./App.bs.js");
var WithAuthenticator$ReactHooksTemplate = require("../aws/WithAuthenticator.bs.js");

var props = {
  Comp: React.createElement(App$ReactHooksTemplate.make, { }),
  includeGreetings: true
};

console.log(props);

function Demo$app(Props) {
  return React.createElement(WithAuthenticator$ReactHooksTemplate.make, {
              props: props
            });
}

var app = Demo$app;

exports.props = props;
exports.app = app;
/* props Not a pure module */

可以找到此问题的重现 here。

更新：

在这里，我试图跟进@glennsl 在下面的 comments/answer。

// define a type modeling what `withAuthenticator` is expecting
[@bs.deriving abstract]
type props = {
  [@bs.as "Comp"]
  comp: React.element,
  [@bs.optional]
  includeGreetings: bool,
};
// use bs.module instead of gentype
[@bs.module ("aws-amplify-react", "withAuthenticator")]
external withAuthenticator: props => React.component(props) =
  "withAuthenticator";
module AppWithAuthenticator = {
  [@bs.obj]
  external makeProps:
    (~children: 'children, unit) => {. "children": 'children} =
    "";
  let make = props => withAuthenticator(props);
};

这是它可能的使用方式，但无法编译。


module AppWithAuth = {
  let props = {
    props(
      ~comp={
        <App />;
      },
      ~includeGreetings=true,
      (),
    );
  };
  [@react.component]
  let make = () => {
    <AppWithAuthenticator props />;
  };
};

编译错误：

>>>> Start compiling
[1/3] Building src/aws/AuthenticatorBS-ReactHooksTemplate.cmj

  We've found a bug for you!
  /Users/prisc_000/working/DEMOS/my-app/src/aws/AuthenticatorBS.re 34:6-25

  32 │   [@react.component]
  33 │   let make = () => {
  34 │     <AppWithAuthenticator props />;
  35 │   };
  36 │ };

  This call is missing an argument of type props

Answer 1

按照这些思路应该可行：

[@genType.import ("aws-amplify-react", "withAuthenticator")]
external withAuthenticator : (React.component('a), bool) => React.component('a) = "withAuthenticator";

module AppWithAuthenticator = {
  [@bs.obj]
  external makeProps: (~children: 'children=?, unit) => {. "children": 'children } = "";
  let make = withAuthenticator(App.make, true);
};

ReactDOMRe.renderToElementWithId(<AppWithAuthenticator />, "root");

external withAuthenticator : ... 将外部 HOC 构造函数声明为一个函数，该函数接受一个反应组件和一个布尔值，并且 returns 一个组件将接受完全相同的道具，因为 'a两个位置都使用类型变量。

module AppWithAuthenticator ... 将 HOC 构造函数应用于 App 组件并设置它以便它可以与 JSX 一起使用。这和直接导入react组件基本一样，只不过我们是通过函数调用的方式获取外部组件，而不是直接导入。

最后，最后一行只是演示了如何使用它。

请注意，我显然没有正确测试它，因为我没有使用 aws-amplify 等设置的项目。我也从未使用过 genType，但对于这个用例来说似乎非常简单。

Answer 2

原因不和谐频道再次来袭。此解决方案有效：

[@bs.module "aws-amplify-react"]
external withAuthenticator:
  // takes a react component and returns a react component with the same signature
  React.component('props) => React.component('props) =
  "withAuthenticator";

module App = {
  [@react.component]
  let make = (~message) => <div> message->React.string </div>;
};

module WrappedApp = {
  include App;
  let make = withAuthenticator(make);
};

如果你想像@glennsl 的回答那样传递第二个 includeGreeting 道具：

[@bs.module "aws-amplify-react"]
external withAuthenticator:
  // takes a react component and returns a react component with the same signature
  (React.component('props), bool) => React.component('props) =
  "withAuthenticator";

module App = {
  [@react.component]
  let make = (~message) => <div> message->React.string </div>;
};

module WrappedApp = {
  include App;
  let make = withAuthenticator(make,true);
};

您可以这样称呼它：

ReactDOMRe.renderToElementWithId(<WrappedApp message="Thanks" />, "root");

感谢@bloodyowl。

如果您不使用 include，这就是它的样子。请参阅下面@glennsl 的评论。

module WrappedApp = {
  let makeProps = App.makeProps;
  let make = withAuthenticator(App.make,true);
};

从 aws-amplify 绑定到高阶组件

Binding to Higher Order Component from aws-amplify

interop

reason

higher-order-components

reason-react

aws-amplify