javascript - connect react redux HOC 得到错误 `Cannot call a class as a function`

Question

我下面的 HOC 有什么问题？我遇到无法将类作为函数调用的错误？

https://i.imgur.com/SirwcGZ.png

我的 HOC

const CheckPermission = (Component) => { 
    return class App extends Component { 
        componentDidMount() {
            this.props.fetchUsers().then(resp => {
                this.setState({user: true, loading: false});
            })
        } 
        render() { 
           const { user, loading } = this.props

           loading && <div>Loading...</div>

           !user && <Redirect to="/dashboard" />

           return <Component {...this.props} />
        }
    } 
}


export default connect(state=>state.global, {fetchUsers})(CheckPermission)

这是我导入和使用 CheckPermission 的方式:

<Route exact path='/dashboard' component={CheckPermission(Dashboard)} />

Answer 1

你不能用 connect 包装 checkPermissions 因为它也是一个 HOC。 相反，您必须编写它们。

import { compose } from 'redux';

...

export default compose(
  connect(state=>state.global, {fetchUsers}),  
  CheckPermission
);