web-dev-qa-db-fra.com

Passer des accessoires à travers un composant d'ordre supérieur à partir d'une route

J'ai un problème avec mon composant d'ordre supérieur. J'essaie de passer des accessoires d'un composant <Layout /> Sur une route (React Router v4). Les composants spécifiés dans les routes sont enveloppés par un HOC, mais les accessoires que je passe n'atteignent jamais le composant.

De plus, je ne peux pas utiliser le HOC sans utiliser export default () => MyHOC(MyComponent). Je ne peux pas comprendre pourquoi, mais cela pourrait avoir quelque chose à voir avec ça?

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.
javascriptreactjsreact-routerreact-router-v4
10
Erik Hellman

Vous avez besoin d'une autre flèche pour faire de votre Page un HOC. Il prend des paramètres, un composant encapsulé et doit renvoyer un composant. Le vôtre était rendu après avoir obtenu 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>
 )
}

Vous pouvez maintenant l'utiliser comme ceci

export default Page({ header: true, headerTitle: 'header title' })(PageOne)
12
Yury Tarabanko