eslint に airbnb 構成を使用していますが、次の警告が表示されます。
[eslint] 'isLoading' is missing in props validation (react/prop-types)
isLoading の PropTypes を設定する方法はありますか?
const withLoading = Component => ({ isLoading, ...rest }) =>
(isLoading ? <LoadingSpinner /> : <Component {...rest} />);
これが私がそれをどのように使用するかの例です:
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')
);
jsfiddle にも投稿しました: http://jsfiddle.net/BernieLee/5kn2xa1j/36/