高次コンポーネントに問題があります。プロップを_<Layout />
_コンポーネントからルートに渡そうとしています(React Router v4)。ルートで指定されたコンポーネントはHOCでラップされていますが、渡した小道具はコンポーネントに到達しません。
また、export default () => MyHOC(MyComponent)
を使用せずにHOCを使用することはできません。理由はわかりませんが、何か関係があるのでしょうか。
Layout.js
_const Layout = ({ location, initialData, routeData, authenticateUser }) => (
<Wrapper>
<Container>
<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
_
Page.js
_// 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
_
PageOne.js
_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.
_
Page
をHOCにするには、もう1つ矢印が必要です。パラメータ、ラップされたコンポーネントを受け取り、コンポーネントを返す必要があります。 WrappedComponent
を取得した後、レンダリングしていました
const Page = (props) => (WrappedComponent) => (moreProps) => {
const renderHeader = props.header
? <Header title={props.headerTitle} />
: false
return (
<Wrapper>
{renderHeader}
<Container withHeader={props.header}>
<WrappedComponent {...moreProps} />
</Container>
</Wrapper>
)
}
これでこのように使えます
export default Page({ header: true, headerTitle: 'header title' })(PageOne)