material-ui - 如何在 reason-react 绑定(bind)中跨组件组合 Prop ？

Question

我目前正在编写一个 material-UI reason-react 绑定(bind)，我想知道如何重新使用之前定义的 Props。

Select 组件在底层的 react-js 库中将所有 Input 属性传播到自身中。这是通过传播 Prop 来完成的，但是在 ReasonML 中不鼓励这样做，因为打字会丢失。

作为临时解决方案，我已将 Prop 从一个复制到另一个，但这不可扩展。如果有人可以建议在 Reason-React 中执行此操作的正确方法是什么，我将不胜感激？

谢谢

输入模块定义:

module Input = {
  [@bs.module "material-ui/Input"] external reactClass : ReasonReact.reactClass = "default";
  let make =
      (
        ~disableUnderline: option(bool)=?,
        ~disabled: option(bool)=?,
        ~error: option(bool)=?,
        ~autoFocus: option(bool)=?,
        ~fullWidth: option(bool)=?,
        ~style: option(ReactDOMRe.style)=?,
        ~value: option(string)=?,
        ~onChange: option((ReactEventRe.Form.t => unit))=?,
        ~placeholder: option(string)=?,
        ~className: option(string)=?,
        ~inputType: option(string)=?,
        children
      ) =>
    ReasonReact.wrapJsForReason(
      ~reactClass,
      ~props=
        Js.Nullable.(
          {
            "disableUnderline": unwrap_bool(disableUnderline),
            "disabled": unwrap_bool(disabled),
            "error": unwrap_bool(error),
            "fullWidth": unwrap_bool(fullWidth),
            "autoFocus": unwrap_bool(autoFocus),
            "style": from_opt(style),
            "placeholder": from_opt(placeholder),
            "className": from_opt(className),
            "type": from_opt(inputType),
            "value": from_opt(value),
            "onChange": from_opt(onChange)
          }
        ),
      children
    );
};

选择模块定义:

    module Select = {
  [@bs.module "material-ui/Select"] external reactClass :  ReasonReact.reactClass = "default";
  let make =
      (
        ~autoWidth: option(bool)=?,
        ~classes: option(Js.t({..}))=?,
        ~className: option(string)=?,
        ~displayEmpty: option(bool)=?,
        ~input: option(ReasonReact.reactElement)=?,
        ~inputClasses: option(Js.t({..}))=?,
        ~native: option(bool)=?,
        ~multiple: option(bool)=?,
        ~menuProps: option(Js.t({..}))=?,
        ~renderValue: option((unit => unit)),
        ~value: option('a)=?,
        ~style: option(ReactDOMRe.style)=?,
        /* Input Props*/
        ~disableUnderline: option(bool)=?,
        ~disabled: option(bool)=?,
        ~error: option(bool)=?,
        ~autoFocus: option(bool)=?,
        ~fullWidth: option(bool)=?,
        ~value: option(string)=?,
        ~onChange: option((ReactEventRe.Form.t => unit))=?,
        ~placeholder: option(string)=?,
        ~className: option(string)=?,
        ~inputType: option(string)=?,
        children
      ) =>
    ReasonReact.wrapJsForReason(
      ~reactClass,
      ~props=
        Js.Nullable.(
          {            
            "autoWidth": unwrap_bool(autoWidth),
            "classes": from_opt(classes),
            "className": from_opt(className),
            "displayEmpty": unwrap_bool(displayEmpty),
            "input": from_opt(input),
            "InputClasses": from_opt(inputClasses),
            "native": unwrap_bool(native),
            "multiple": unwrap_bool(multiple),
            "MenuProps": from_opt(menuProps),
            "renderValue": from_opt(renderValue),
            "value": from_opt(value),
            "style": from_opt(style),
            /* Input Props*/
            "disableUnderline": unwrap_bool(disableUnderline),
            "disabled": unwrap_bool(disabled),
            "error": unwrap_bool(error),
            "fullWidth": unwrap_bool(fullWidth),
            "autoFocus": unwrap_bool(autoFocus),
            "style": from_opt(style),
            "placeholder": from_opt(placeholder),
            "className": from_opt(className),
            "type": from_opt(inputType),
            "value": from_opt(value),
            "onChange": from_opt(onChange)
          }
        ),
      children
    );
};

Answer 1

您可以使用柯里化(Currying)和 Js.Obj.assign 来实现这一点:

let common = (reactClass, props, ~commonProp1, ~commonProp2, children) =>
  ReasonReact.wrapJsForReason(
    ~reactClass,
    ~props=Js.Obj.assign(props, {
      "commonProp1": commonProp1,
      "commonProp2": commonProp2
    }),
    children
  );

module Input = {
  [@bs.module "material-ui/Input"] external reactClass :  ReasonReact.reactClass = "default";
  let make = (~inputProp1, ~inputProp2) => common(reactClass, {
    "inputProp1": inputProp1,
    "inputProp2": inputProp2
  });
};

module Select = {
  [@bs.module "material-ui/Select"] external reactClass :  ReasonReact.reactClass = "default";
  let make = (~selectProp1, ~selectProp2) => common(reactClass, {
    "selectProp1": selectProp1,
    "selectProp2": selectProp2
  });
};

在每个 make 函数中，common 被部分应用，并且由于 currying 将使用自己的参数“扩展”make 函数。实际上，例如的类型签名Input.make 将是 ~inputProp1 => ~inputProp2 => ~commonProp1 => ~commonProp2 => ...。