Question

我正在使用反应路由器V4 ，当我声明一个Route我希望将我的组件包装在High Order组件中时，如果我在

中使用HOC

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

它返回此错误：

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>
              )
          }
      }
};`

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

`

editable

Answer 1

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

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

1 个答案: