通过道路上的更高阶部件传递道具

我的高阶部件有问题。我试图从一个路由（React Router v4）向<Layout />组件传递道具。路线中指定的组件由HOC包装，但我传递的道具从未到达组件。我不能使用HOC而不使用export default() => MyHOC(MyComponent)。我无法弄清楚为什么，但这可能与它有关呢？通过道路上的更高阶部件传递道具

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.

来源

2017-06-22 Erik Hellman

你需要一个更多箭头使您的Page成为HOC。它需要params，包装组件，并且必须返回一个组件。你让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)

来源

2017-06-22 08:36:42

谢谢你，完美地工作！ –

通过道路上的更高阶部件传递道具

回答

相关问题