Javascript 从路线将道具穿过高阶组件

我的高阶组件有问题。我试图将道具从

组件传递到一条路径（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

// 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

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.

const布局=（{location，initialData，routeData，authenticateUser}）=>(
//如何让这些道具通过HOC？渲染而不是组件没有区别。
} />
} />
)
导出默认布局

Page.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

// 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

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.

//我尝试切换到（WrappedComponent）=>（道具），但没有成功
常量页面=（道具）=>（WrappedComponent）=>{
const renderHeader=props.header
? 
：错
返回(
{renderHeader}
)
}
导出默认页面

PageOne.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

// 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

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.

class PageOne扩展了React.Component{
render（）{
返回(
{this.props.title}//第页
//使用“仅导出默认页面”时，我得到“不变冲突：元素类型无效：
//应为字符串（用于内置组件）或类/函数（用于复合组件）
//但得到：object。请检查Route的渲染方法。错误。

您还需要一个箭头才能使您的

页面成为一个HOC。它需要参数、包装的组件并必须返回一个组件。您的页面在获取
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>
 )
}

当您调用它时？谁是包装组件？-@ValRob Hmmm，您可以在需要时调用它。例如，在导出之前。包装组件是您要包装的任何组件。