uncontrollable

통제 할 수없는

구성 요소 소비자가 특정 소품/핸들러 쌍을 생략 할 수 있도록 제어 된 반응 구성 요소를 감싸십시오. 통제 할 수없는 상태에서 최소한의 상태로 React 구성 요소를 작성한 다음 제외되면 Prop/Handler의 상태를 관리하는 구성 요소로 랩핑 할 수 있습니다.

설치하다

npm i -S uncontrollable

용법

이 모듈의 이유 에 대해 조금 확실하지 않은 경우 다음 섹션을 먼저 읽으십시오. 실제 예제를보고 싶다면이 전략을 많이 사용하는 React Widgets를 확인하십시오.

 import { uncontrollable } from 'uncontrollable' ;

API

useUncontrolledProp(value, defaultValue, onChange) => [value, onChange]

위의 고차 성분 대신 사용할 수있는 반응 후크. 어린이 요소로 퍼지기에 안전한 전체 props 세트를 반환합니다.

 import { useUncontrolledProp } from 'uncontrollable' ;

const UncontrolledCombobox = ( { value , defaultValue , onChange } ) => {
  // filters out defaultValue, defaultOpen and returns controlled
  // versions of onChange, and onToggle.
  const [ controlledValue , onControlledChange ] = useUncontrolledProp (
    value ,
    defaultValue ,
    onChange
  ) ;

  return < Checkbox { ... controlledProps } / > ;
} ; 

useUncontrolled(props, propsHandlerHash) => controlledProps

위의 고차 성분 대신 사용할 수있는 반응 후크. 어린이 요소로 퍼지기에 안전한 전체 props 세트를 반환합니다.

 import { useUncontrolled } from 'uncontrollable' ;

const UncontrolledCombobox = ( props ) => {
  // filters out defaultValue, defaultOpen and returns controlled
  // versions of onChange, and onToggle.
  const controlledProps = useUncontrolled ( props , {
    value : 'onChange' ,
    open : 'onToggle' ,
  } ) ;

  return < Checkbox { ... controlledProps } / > ;
} ;

유스 케이스

RECT의 강점 중 하나는 확장 성 모델이며, 성분 상태를 가능한 한 나무 위로 올리는 일반적인 관행에 의해 가능합니다. 구성 요소에 대해 매우 유연하고 쉽게 추론 할 수있는 데 도움이되지만 모든 용도로 구성 요소를 연결하기 위해 많은 보일러 플레이트를 생성 할 수 있습니다. 간단한 구성 요소 (입력과 같은)의 경우 일반적으로 입력 value 소품을 onChange 처리기를 통해 부모 상태 속성에 묶는 문제입니다. 다음은 매우 일반적인 패턴입니다.

  render ( ) {
    return (
      < input type = 'text'
        value = { this . state . value }
        onChange = { e => this . setState ( { value : e . target . value } ) }
      / >
    )
  }

이 패턴은 입력에서 부모로 value 관리하는 책임을 옮기고 "양방향"데이터베이닝을 모방합니다. 그러나 때로는 부모가 입력 상태를 직접 관리 할 필요가 없습니다. 이 경우, 우리가 원하는 것은 입력의 초기 value 설정하고 입력이 그때부터이를 관리하도록하는 것입니다. RECT는 "통제되지 않은"입력을 통해이를 다루며, 여기서 value 을 통해 외부 입력 상태를 제어하지 않으려면 책 보관을 수행합니다.

이것은 우리 자신의 구성 요소에서 사용할 수있는 훌륭한 패턴입니다. 부모가 의미가있는 모든 것을 제어하고 싶다고 가정 할 때, 각 구성 요소를 가능한 한 무국적자가되도록 구축하는 것이 가장 좋습니다. 간단한 드롭 다운 구성 요소를 예로 들어 보겠습니다

 class SimpleDropdown extends React . Component {
  static propTypes = {
    value : React . PropTypes . string ,
    onChange : React . PropTypes . func ,
    open : React . PropTypes . bool ,
    onToggle : React . PropTypes . func ,
  } ;

  render ( ) {
    return (
      < div >
        < input
          value = { this . props . value }
          onChange = { ( e ) => this . props . onChange ( e . target . value ) }
        / >
        < button onClick = { ( e ) => this . props . onToggle ( ! this . props . open ) } >
          open
        < / button >
        { this . props . open && (
          < ul className = "open" >
            < li > option 1 < / li >
            < li > option 2 < / li >
          < / ul >
        ) }
      < / div >
    ) ;
  }
}

간단한 드롭 다운에서 어떤 상태도 추적하지 않는 방법에 주목하십니까? 우리 모듈의 소비자가 드롭 다운 동작이 무엇인지 결정할 수있는 모든 유연성을 갖기 때문에 이것은 훌륭합니다. 또한 공개 API (proptypes)에 주목하십시오. 일반적인 패턴으로 구성됩니다 : 우리가 원하는 속성 ( value , open ) 및 세트를 설정할 때 ( onChange , onToggle )를 원하는 핸들러 세트. 핸들러에 대한 응답으로 value 과 소품을 open 것은 부모 구성 요소에 달려 있습니다.

이 패턴은 소비자에게 탁월한 유연성을 제공하지만, 사용에서 사용하는 것에서 크게 변하지 않을 수있는 보일러 플레이트 코드를 작성해야합니다. 모든 가능성에 따라 그들은 항상 onToggle 에 대한 응답으로 open 설정하기를 원할 것이며, 드문 경우에만 해당 행동을 무시하고 싶을 것입니다. 제어/통제되지 않은 패턴이 들어오는 곳입니다.

소비자가 open 소품을 제공하지 않으면 Open/Ontoggle 케이스를 스스로 처리하려고합니다 (제어를 원한다는 것을 나타냅니다). 드롭 다운 구성 요소를 모든 논리로 복잡하게하고 드롭 다운의 비즈니스 논리를 가려주는 대신 드롭 다운을 가져 와서 다른 구성 요소 안에 포장하여 나중에 추가 할 수 있습니다.

uncontrollable 제어/통제되지 않은 입력을 생성하는 데 필요한 논리를 분리하여 완전히 제어 된 입력을 생성하고 나중에 포장하는 데 집중할 수 있습니다. 이것은 추론하기에 훨씬 간단한 경향이 있습니다.

  import { uncontrollable } from 'uncontrollable' ;

  const UncontrollableDropdown = uncontrollable ( SimpleDropdown , {
    value : 'onChange' ,
    open : 'onToggle'
  } )

  < UncontrollableDropdown
    value = { this . state . val } // we can still control these props if we want
    onChange = { val => this . setState ( { val } ) }
    defaultOpen = { true } / > // or just let the UncontrollableDropdown handle it
                          // and we just set an initial value (or leave it out completely)!

이제 우리는 열린 ontoggle에 대해 걱정할 필요가 없습니다! 반환 된 구성 요소는 onToggle 반품에 open open 추적합니다. 우리가 그것에 대해 걱정하고 싶다면 , 우리는 단지 open onToggle 소품을 제공 할 수 있으며 통제되지 않은 입력은 그것들을 통과합니다.

위의 예는 고안된 예이지만 더 복잡한 구성 요소를 감싸서 API에서 많은 유연성을 제공 할 수 있습니다. 모든 소품/핸들러 쌍의 경우 "Default [propname]"형식의 기본 프로 탑이 표시됩니다. 따라서 value -> defaultValue 및 open > defaultOpen 등. 여기 : https://github.com/jquense/react-widgets/blob/5d1b530cb094cdc72f577fe01be4a02dd265400/src/multiselect.jsx#l521