Is there a way for PropTypes from a component inside of a Higher Order Component to point back to where they were created?
This is a small sample but if there was multiple EnhancedButtons
throughout an application in separate files this would be very hard to debug.
Since the Higher Order Component is ideally made for reusability we may never know the location of the component that is missing the handleClick method. The render method of _EnhancedButton
is a variable for any Component
that we want enhanced.
Is there any way to make the PropTypes more obvious where they are being created such as FinalButton
which is inserted and is an instance of _EnhancedButton
and is missing the prop handleClick?
https://jsfiddle.net/kriscoulson/sh2b8vys/3/
var Button = (props) => (
<button onClick={ () => props.handleClick() }>
Submit
</button>
);
Button.propTypes = {
handleClick: React.PropTypes.func.isRequired
}
const EnhanceButton = Component => class _EnhancedButton extends React.Component {
render () {
return (<Component { ...this.props }>{this.props.children}</Component>);
}
}
const FinalButton = EnhanceButton(Button);
ReactDOM.render(
<FinalButton />,
document.getElementById('container')
);
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
See Question&Answers more detail:os