React 中基於角色的授權中的 HOC 錯誤

Question

我一直在嘗試在 React 中實現基於角色的授權，如下所示

在 authorization.js 中，檢查是否允許具有其角色的登錄用戶訪問該頁面：

import React from "react";

const Authorization = (WrappedComponent, allowedRoles) => {
  return class WithAuthorization extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        user: {
          name: "vcarl",        
          role: "Admin"
        }
      };
    }
    render() {
      const { role } = this.state.user;
      if (allowedRoles.includes(role)) {
        return <WrappedComponent {...this.props} />;
      } else {
        return <h1>No page for you!</h1>;
      }
    }
  };
};

export default Authorization;

在 App.js 中

render() {
    const accounts = Authorization(["SuperAdmin", "Admin"]);

    return (
      <StateContext.Provider value={{ ...this.state }}>
        <Router>                   
            <Route
              exact
              path="/accounts"
              component={accounts(Accounts)}
            />         
        </Router>
      </StateContext.Provider>
    );
  }

在 Accounts.js 中：

import React, { Component } from "react";

class Accounts extends Component {
  render() {
    return <div>Accounts page</div>;
  }
}

export default Accounts;

但得到錯誤：

TypeError: Class constructor WithAuthorization cannot be invoked without 'new'

有什么建議？

Answer 1

您正在嘗試返回 class 但是在 React 哲學中組件應該返回 JSX 或修改后的 Children 組件所以您需要刪除

return class WithAuthorization extends React.Component {

並從

return <WrappedComponent {...this.props} />;

到

return <>{this.props.children}</>;