Question

我很难理解如何创建一个多用户类型的应用程序。我正在创建一个大项目，我想为买方提供一个不同的GUI，为卖方提供一个完全不同的GUI。我想要一个类似的东西，如果用户已登录并且是买家，则渲染ComponentA，如果他们是卖家，则渲染ComponentB。我考虑的方式是检查状态中的用户类型，然后相应地呈现它。这种方法是否经过优化？真的有可能吗？

我应该为买方创建两个“智能”组件，为卖方创建一个“智能”组件吗？我真的很困惑，任何帮助将不胜感激。 PS：我对ReactJ还是很陌生

Answer 1

您应该创建一个工厂模式，以根据用户类型呈现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;
  }
}

Answer 2

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

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应用程序

2 个答案: