React Router V4，使用具有高阶组件的渲染道具

Question

我正在使用 react router V4，当我声明一个路由时，如果我在

中使用 HOC，我想将我的组件包装在高阶组件中

export default hoc(Component)

然后我将组件放在渲染道具中，它起作用了。当我这样做时

`<Route exact path="/projects" render={(props) => (withNavHOC(<ProjectsContainer {...props}/>))} />`

它returns这个错误：

Uncaught Error: Route.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

为什么会这样？我的 Hoc 工作正常，它 returns 一个有效的反应组件：

`

const withNavHOC = (WrappedComponent) => {
  return class extends React.Component{
      render(){
          if(this.props.match.params.id){
              console.log("Here");
              return(
                  <div>
                      <ProjectMenu/>
                      <WrappedComponent {...this.props}/>
                  </div>)
          }
          return(
                  <div>
                      <Navigation/>
                      <WrappedComponent {...this.props}/>
                  </div>
              )
          }
      }
};`

Answer 1

HOC当然是一个简单的函数，我们必须传"Component"，而不是<Component/>。

React Router V4，使用具有高阶组件的渲染道具

React Router V4, Using render props with high order component

javascript

reactjs

react-router

react-router-dom