고위 주문 구성 요소에 반응하십시오.

Question

사용자가 두 구성 요소를 전달할 수있는이 HOC를 만들었고 멋진 스택 아이콘을 반환합니다. (

const StackIcons = (BaseIcon, TopIcon) => (props) => { 
    const { container, base, top } = props; 
    return (
    <span className={`fa-stack fa-lg fa-${container}`}> 
     <BaseIcon stack="2x" className="info" {...base} /> 
     <TopIcon stack="1x" isInverse={true} {...top} /> 
    </span> 
    ); 
}; 

나는 용기, 기본 아이콘 및 상단 아이콘 사이의 서로 다른 소품을 구별 할 필요가있다, 그래서는 컨테이너의 속성 (문자열), 기본 (객체)이 객체, 및 정상을 통과하기로 결정 목적). 예를 들어

,이 방법

const object = { 
    container: 'lg', 
    base: { 
    stack: '2x', 
    className: 'info' 
    }, 
    top: { 
    stack: '1x', 
    isInverse: true 
    } 
} 

나의 가장 큰 문제는 propTypes 및 defaultProps가 작동하지 않는 사실이다. defaultProps가 작동하지 않기 때문에

// StackIcons.defaultProps = { 
//  base: { 
//   stack: '2x', 
//   className: 'info' 
//  }, 
//  top: { 
//   stack: '1x', 
//   isInverse: true 
//  }, 
//  container: 'lg' 
// }; 

StackIcons.propTypes = { 
    base: PropTypes.object.isRequired, 
    top: PropTypes.object.isRequired, 
    container: PropTypes.oneOf(['lg', '2x', '3x', '4x', '5x']).isRequired, 
}; 

, 나는 그들을 주석과베이스와 상단 아이콘 구성 요소의 소품을 하드 코딩,하지만 소비자가 적절한 소품을 전달하여 기본 소품을 무시할 수 있습니다하기로 결정했다.

사용 :

const StackedIcons = StackIcons(<CircleIcon />, <DollarSign />); 

// in render method 
<StackedIcons /> // use default props 

// or override the defaultProps. 
<StackedIcons container="..." base={{...}} top={{...}} /> 

1. 가 어떻게 propTypes 및 defaultTypes를 해결하기 위해?
2. 더 좋은 방법이 있습니까?

나는 이런 식으로 뭔가를 시도 않았다

const StackIcons = (BaseIcon) => (baseIconProps) => (TopIcon) => (topIconProps) => {...} 

그러나 나는이 일의 팬이 아니 었 : Yury Tarabanko에 큰 감사

const StackedIcons = StackIcons(<CircleIcon />)({ stack: '12x', className: 'info' })(<DollarSign />) 

// in render method 
<StackedIcons stack="1x" isInverse={true} /> 

은! 이 구성 요소가 아니기 때문에

import React from 'react'; 
import PropTypes from 'prop-types'; 

const stackIcons = (BaseIcon, TopIcon) => { 

    const StackIcons = (props) => { 
     const {container, base, top} = props; 
     return (
      <span className={`fa-stack fa-lg fa-${container}`}> 
       <BaseIcon {...base} /> 
       <TopIcon {...top} /> 
      </span> 
     ); 
    }; 

    StackIcons.defaultProps = { 
     base: { 
      stack: '2x', 
      className: 'info' 
     }, 
     top: { 
      stack: '1x', 
      isInverse: true 
     }, 
     container: 'lg' 
    }; 

    StackIcons.propTypes = { 
     base: PropTypes.object.isRequired, 
     top: PropTypes.object.isRequired, 
     container: PropTypes.oneOf(['lg', '2x', '3x', '4x', '5x']).isRequired, 
    }; 

    return StackIcons; 
}; 

export default stackIcons; 

Answer 1

당신은 StackIcons에 propTypes을 설정할 수 없습니다 : 은 여기 내 업데이트 작업 버전입니다. 구성 요소를 반환합니다. 따라서 반환 된 구성 요소에 propTypes을 설정해야합니다. `defaultProps`작동하지 뭐죠

const StackIcons = (BaseIcon, TopIcon) => { 

    const Wrapped = props => ... 

    Wrapped.propTypes = {} 

    Wrapped.defaultProps = {} 

    return Wrapped 
}; 

사용은

// here StackIcons is HOC 
// you can't use it like <StackIcons/> 
// but StackedIcons is just a stateless component 
const StackedIcons = StackIcons(CircleIcon, DollarSign); 

// so you can use it like this 
<StackedIcons /> // use default props 

// or override the defaultProps. 
<StackedIcons container="..." base={{...}} top={{...}} />