有没有办法在 react-js 中扩展另一个 class 而不是组件 class

Question

我正在使用 react-js 开发一个网站。 我正在通过扩展到另一个 class 来实现中间件功能。

我有多个组件，例如

export default class Login extends React.Component{} // for public group
export default class Register extends React.Component{} // for public group

export default class Profile extends React.Component{} // for Private group
export default class Settings extends React.Component{} // for Private group
export default class EditProfile extends React.Component{} // for Private group

How wonder if i create two class one class Private and another will be class public that extends to the my private and public group components that call one function for checking that there Auth token is still valid or not by this i do not have to call same function 在我尝试过的每个组件中一次又一次，但我的 IDE 说

Parsing error: Classes can only extend a single class.eslint

如果这是一个愚蠢的想法，请评论我如何在没有Redux的情况下做到这一点。

最终的代码会像

export default class Login extends Public, React.Component{} // for public group
export default class Register extends Public, React.Component{} // for public group

export default class Profile extends Private, React.Component{} // for Private group
export default class Settings extends private, React.Component{} // for Private group
export default class EditProfile extends Private, React.Component{} // for Private group

抱歉英语不好。

Answer 1

JavaScript 中没有多个 inheritance。

但是你可以做一些变通方法。 例如JavaScript 中的多重继承/原型

但是在 React 中，你应该只从一个 Class 扩展。 因此，您应该将所有需要的功能封装在应该从 React.Component 扩展的 Private 和 Public 类中。

class Public extends React.Component {}
class Private extends React.Component {}

export default class Login extends Public {}
export default class Register extends Public {}

export default class Profile extends Private {}
export default class Settings extends Private {}
export default class EditProfile extends Private {}

如果您想获得功能来检查用户是否在没有Redux的情况下获得授权。

您可以创建一个 HOC。 你可以在这里阅读更多https://reactjs.org/docs/higher-order-components.html#use-hocs-for-cross-cutting-concerns

function private(Component) {
  const isTokenValid = ... // here your stuff

  if (isTokenValid) return Component;
  else ... // do your needed stuff. For example, redirect to the Login page.
}

// I'm not sure if this HOC(High Order Component) is needed, but anyway
function public(Component) {
  const isTokenValid = ... // here your stuff

  if (isTokenValid) // do your needed stuff. For example, redirect to the Main page.
  else return Component; 
}

export class Login extends React.Component {}
export class Register extends React.Component {}

export class Profile extends React.Component {}
export class Settings extends React.Component {}
export class EditProfile extends React.Component {}

export const ProtectedLogin = public(Login);
export const ProtectedRegister =  public(Register);

export const ProtectedProfile = private(Profile);
export const ProtectedSettings = private(Settings);
export const ProtectedEditProfile = private(EditProfile);