jeudi 25 janvier 2018

Higher Order Component can't access Wrapped Component's default props

I have an HOC like so:

export default function HOC(WrappedComponent) {
  return class extends Component {

    static propTypes = {
      i: PropTypes.number.isRequired
    };

    render() {
console.log(this.props);
      return <WrappedComponent
        {...this.props}/>;
    }
  };
}

And my wrapped component is like so:

WrappedComponent extends Component {
    static defaultProps = {
      i: 0
    };

    render() {
      return <div/>;
    }
  };

export default HOC(WrappedComponent);

In my console.log in the HOC, i is not defined. The props passed into WrappedComponent by its parent are, however, defined in the HOC. How can I solve this issue?




Aucun commentaire:

Enregistrer un commentaire