DRY jsx 렌더링 방법

Question

이 코드를 건조하는 것이 더 좋은지 궁금한 점이 있습니까? 당신은 {{select}} and {{selectAsync}}와 jsx 부분에서 그들을 렌더링 할 수

let createElement = function(Component) { 
    return (
     <Component onChange={(val) => { 
      onChange(val); 
      callback(val); 
      }} 
      value={value} 
     {...rest} 
     /> 
    ); 
}; 

당신이

let selectAsync = createElement(Select.Async); 
let select = createElement(Select); 

을 수행 할 수 있습니다 소품은 ...

render() { 
    const { input: { value, onChange }, callback, async, ...rest } = this.props; 

    if (async) { 
     return (
     <Select.Async 
      onChange={(val) => { 
      onChange(val); 
      callback(val); 
      }} 
      value={value} 
      {...rest} 
     /> 
    ); 
    } 

    return (
     <Select 
     onChange={(val) => { 
      onChange(val); 
      callback(val); 
     }} 
     value={value} 
     {...rest} 
     /> 
    ); 
    } 

Answer 1

와 같은, 단지 구성 요소의 변화입니다

추신 : 나는 이것을 직접 테스트하지는 않았지만 비슷한 결과를 보였습니다. 며칠 전이 접근 방식이 효과가 있습니다. 구성 요소는 대문자로 시작해야합니다.