Created
June 21, 2017 15:02
-
-
Save ehellman/d958638437798324ff6c4d8f93103e97 to your computer and use it in GitHub Desktop.
HOC Issue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Layout = ({ location, initialData, routeData, authenticateUser }) => ( | |
<Wrapper> | |
<Container> | |
<Header> | |
<Navigation /> | |
</Header> | |
<Switch> | |
// how do I get these props passed through the HOC? render instead of component made no difference. | |
<Route exact path="/pages/page-one" component={() => <PageOne routeData={routeData} title="PageOne" />} /> | |
<Route exact path="/pages/page-two" component={() => <PageTwo routeData={routeData} title="PageTwo" />} /> | |
<Route component={NotFound} /> | |
</Switch> | |
</Container> | |
</Wrapper> | |
) | |
export default Layout |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// I've tried swapping to (WrappedComponent) => (props) without success | |
const Page = (props) => (WrappedComponent) => { | |
const renderHeader = props.header | |
? <Header title={props.headerTitle} /> | |
: false | |
return ( | |
<Wrapper> | |
{renderHeader} | |
<Container withHeader={props.header}> | |
<WrappedComponent /> | |
</Container> | |
</Wrapper> | |
) | |
} | |
export default Page |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class PageOne extends React.Component { | |
render() { | |
return ( | |
<Content> | |
<Title>{this.props.title}</Title> // <----- not working! | |
{JSON.stringify(this.props.routeData, null, 4)} // <---- not working! | |
</Content> | |
) | |
} | |
} | |
export default () => Page({ header: true, headerTitle: 'header title' })(PageOne) | |
// does not work without () => Page | |
// when using just export default Page I get the "Invariant Violation: Element type is invalid: | |
// expected a string (for built-in components) or a class/function (for composite components) | |
// but got: object. Check the render method of Route." error. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment