이유 반응 바인딩에서 구성 요소간에 소품을 작성하는 방법은 무엇입니까?

Question

저는 현재 material-UI reason-react 바인딩을 작성 중입니다. 이전에 어떻게 Props를 정의했는지 다시 알고 싶습니다.

Select 구성 요소는 내부의 모든 입력 소품을 내부의 react-js 라이브러리로 확산시킵니다. 이것은 소품을 펼침으로써 이루어 지지만, 타이핑을 잃어 버리면 ReasonML에서 실망하게됩니다.

임시 해결 방안으로 하나에서 다른 것으로 소품을 복사했지만 확장 할 수 없습니다. 어떤 사람이 Reason-React에서이 작업을 수행하는 올바른 방법을 제안 할 수 있다면 고맙겠습니다.

감사

입력 모듈 definiton :

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 
    ); 
}; 

선택 모듈 definiton는 :

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

당신은 태닝을 사용할 수 있습니다

및 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 => ...입니다.