通过路线中的高阶组件传递道具 [英] Pass props through a higher order component from a Route
问题描述
我的高阶组件有问题。我试图将< Layout />
组件中的道具传递到路线(React Router v4)。路由中指定的组件由HOC包装,但我传递的道具永远不会到达组件。
I have a problem with my Higher Order Component. I am trying to pass props from a <Layout />
component down a route (React Router v4). The components specified in the routes are wrapped by a HOC, but the props that I pass never reaches the component.
另外,我不能在不使用 export default()=>的情况下使用HOC。 MyHOC(MyComponent的)
。我无法弄清楚为什么,但这可能与它有关?
Also, I can't use the HOC without using export default () => MyHOC(MyComponent)
. I can't figure out why, but that might have something to do with it?
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。它需要params,包装组件并且必须返回组件。获得 WrappedComponent
You need one more arrow to make your Page
to be a HOC. It takes params, wrapped component and has to return a component. Yours were rendering after getting 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>
)
}
现在你可以这样使用它了
Now you can use it like this
export default Page({ header: true, headerTitle: 'header title' })(PageOne)
这篇关于通过路线中的高阶组件传递道具的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!