如何为高阶功能组件设置 PropTypes?
How do I set PropTypes for Higher Order Functional Component?
我正在为 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/
猜测 isLoading 是一个布尔值
withLoading.propTypes = {
isLoading: React.PropTypes.bool
};
这是您需要的:
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,
};
我正在为 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/
猜测 isLoading 是一个布尔值
withLoading.propTypes = {
isLoading: React.PropTypes.bool
};
这是您需要的:
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,
};