高次のコンポーネントに反応する

Question

ユーザーは2つのコンポーネントを渡すことができるこの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> 
    ); 
}; 

Iはコンテナ、ベースのアイコン、および上部のアイコンの間で異なる小道具を区別する必要があるので、私はコンテナのプロパティ（文字列）、塩基（オブジェクト）を持つオブジェクト、及び上部を通過することを決めましたオブジェクト）。例えば

、このアプローチには

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

私の最大の問題は、propTypesと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, 
}; 

defaultPropsが働いていないので、私はそれらをコメントアウトすることを決定し、ベースとトップアイコンコンポーネント用の小道具をハードコードされたが、その後、消費者は、適切な小道具に渡すことで、デフォルトの小道具を上書きすることができます。

使用：propTypesとdefaultTypesを修正する方法

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

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

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

1. ？
2. 良い方法がありますか？

私はこのような何かを試してみました：

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

しかし、私はこれを行うためのファンではなかった：ユーリー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を設定する必要があります。

const StackIcons = (BaseIcon, TopIcon) => { 

    const Wrapped = props => ... 

    Wrapped.propTypes = {} 

    Wrapped.defaultProps = {} 

    return Wrapped 
}; 

使い方は、 `` defaultPropsで作業していないいただきました！

// 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={{...}} />