Javascript 构建多视图、多用户类型的应用程序

我有一个问题，让我的头周围我将如何着手创建一个多用户类型的应用程序。我正在创建一个大项目，我想为买家提供一个不同的GUI，为卖家提供另一个完全不同的GUI。我想要的是，如果用户登录并且是买家，那么呈现组件a如果他们是卖家，那么呈现组件B。我考虑的方法是检查状态中的用户类型，然后相应地呈现它。这种方法是优化的吗？还有，这真的有可能吗

---

我是否应该创建两个“智能”组件，一个给买方，一个给卖方？我真的很困惑，任何帮助都会很感激的。PS：我对ReactJs非常陌生

是的，您可以在高级组件中渲染不同的智能组件，并在获取数据后立即渲染

class App extends React.PureComponent {
    render() {
        const { loading, userType = 'customer'} = this.props
        if(loading){
            return (<div>Loading<div/>
         } else if(userType=== 'customer'){
            return (<CustomerPanel />
         } else {
            return (<SellerPanel />
         }
    }
}

类应用程序扩展了React.PureComponent{
render（）{
const{loading，userType='customer'}=this.props
如果（装载）{
返回（装载）
}else if（用户类型===‘客户’）{
返回(
}否则{
返回(
}
}
}

是的，您可以在高级组件中呈现不同的智能组件，并在获取数据后立即呈现

class App extends React.PureComponent {
    render() {
        const { loading, userType = 'customer'} = this.props
        if(loading){
            return (<div>Loading<div/>
         } else if(userType=== 'customer'){
            return (<CustomerPanel />
         } else {
            return (<SellerPanel />
         }
    }
}

类应用程序扩展了React.PureComponent{
render（）{
const{loading，userType='customer'}=this.props
如果（装载）{
返回（装载）
}else if（用户类型===‘客户’）{
返回(
}否则{
返回(
}
}
}

您应该创建一个工厂模式，根据用户类型呈现Admin或Seller容器或组件（两者都适用）：

class LogIn extends React.Component {
  render() {
    if (isLoggedIn) {
      return <LoginFactory {...this.props} />;
    }
    return <LoginForm {...this.props} />
  }
}

function LoginFactory({ userType, ...props }) {
  switch (userType) {
    case 'admin':
      return <Admin {...props} />;
    case 'seller':
      return <Seller {...props} />;
    default:
      return null;
  }
}

类登录扩展了React.Component{
render（）{
如果（isLoggedIn）{
返回；
}
返回
}
}
函数LoginFactory（{userType，…props}）{
开关（用户类型）{
案例“管理”：
返回；
“卖方”案例：
返回；
违约：
返回null；
}
}

您应该创建一个工厂模式，根据用户类型呈现Admin或Seller容器或组件（两者都适用）：

class LogIn extends React.Component {
  render() {
    if (isLoggedIn) {
      return <LoginFactory {...this.props} />;
    }
    return <LoginForm {...this.props} />
  }
}

function LoginFactory({ userType, ...props }) {
  switch (userType) {
    case 'admin':
      return <Admin {...props} />;
    case 'seller':
      return <Seller {...props} />;
    default:
      return null;
  }
}

类登录扩展了React.Component{
render（）{
如果（isLoggedIn）{
返回；
}
返回
}
}
函数LoginFactory（{userType，…props}）{
开关（用户类型）{
案例“管理”：
返回；
“卖方”案例：
返回；
违约：
返回null；
}
}