2

私はeslintためairbnb構成を使用することだし、それは私にこの警告与えている:高次機能コンポーネントのPropTypeを設定するにはどうすればよいですか?

[eslint] 'isLoading' is missing in props validation (react/prop-types)

isLoadingためPropTypesを設定する方法はありますか? http://jsfiddle.net/BernieLee/5kn2xa1j/36/

+0

はい、単にwithLoading.propTypes = {isLoading:PropTypes.bool};を設定してください。 https://stackoverflow.com/questions/37847616/proptypes-on-higher-order-componentsの重複していると思います – Larce

+0

返信ありがとう、Larce。私はそれを試みましたが、 'isLoading'は' withLoading'ではなく 'Component'のための小道にあるので、私は思っていませんでした。以下のChamiduへの私の返事を見てください。 –

答えて

1

です:私もjsfiddleするためにそれを掲載しました

const Button = ({ onClick, className, children }) => (
    <button onClick={onClick} className={className} type="button"> 
    {children} 
    </button> 
); 
Button.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    className: PropTypes.string, 
    children: PropTypes.node.isRequired, 
}; 
Button.defaultProps = { 
    onClick:() => {}, 
    className: '', 
    children: 'Click me', 
}; 

const Loading =() => (
    <div> 
    <p>Loading...</p> 
    </div> 
); 

const withLoading = Component => ({ isLoading, ...rest }) => 
    (isLoading ? <Loading /> : <Component {...rest} />); 

// How do I set propTypes for isLoading? 
// I tried this but it didn't work: 
// withLoading.propTypes = { 
// isLoading: PropTypes.bool 
// }; 

const ButtonWithLoading = withLoading(Button); 

// The rendered component is based on this boolean. 
// isLoading === false: <Button /> is rendered 
// isLoading === true: <Loading /> is rendered 
const isLoading = false; 

ReactDOM.render(
    <ButtonWithLoading 
     isLoading={isLoading} 
     onClick={() => alert('hi')} 
    >Click Me</ButtonWithLoading>, 
    document.getElementById('root') 
); 

:ここ

const withLoading = Component => ({ isLoading, ...rest }) => 
    (isLoading ? <LoadingSpinner /> : <Component {...rest} />); 

は、私はそれを使用する方法の例ですあなたが必要とするもの:

const withLoading = (Component) => { 
    const wrapped = ({ isLoading, ...rest }) => (
    isLoading ? <div>Loading</div> : <Component {...rest} /> 
); 
    wrapped.propTypes = { 
    isLoading: PropTypes.bool.isRequired, 
    }; 
    return wrapped; 
}; 
withLoading.propTypes = { 
    Component: PropTypes.element, 
}; 
+0

驚くばかり!ありがとう、@MaelFr –

0

推測isLoadingはここブール

withLoading.propTypes = { 
    isLoading: React.PropTypes.bool 
}; 
+0

あなたはちょうどいい、Chamidu、私は言っているべきだったisLoadingはブーリアンです しかし、isLoadingはwithLoadingではなく、ラップされたComponentの小道具にあります。 私が試み、この: 'Component.propTypes = {isLoading:PropTypes.bool、};' Iは、私はこの警告を取得することしようとした場合: '[eslint] '成分' が定義されていません。 (no-undef) ' 'コンポーネント 'は、ラップするために渡されるコンポーネントのプレースホルダの名前です。 –

+0

もう少しコードをここに追加してください。 "withLoading"コンポーネントはどうやって使用していますか? 多分JSX おそらくラップされたコンポーネントにpropTypeを追加する必要があります。 しかし、実装を見ていないと、より正確な答えを与えることはできません –

+0

"Component =>"部分を削除し、それが機能しているかどうかを確認してください。 –

関連する問題