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

Question

我正在使用反应路由器 V4，当我声明一个路由时，我想将我的组件包装在一个高阶组件中，如果我在中使用 HOC

export default hoc(Component)

然后我将组件放在渲染道具中，它可以工作。当我这样做时

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

它返回此错误：

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 工作正常，它返回一个有效的反应组件：

`

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