Javascript 设计和构造多角色应用程序

我正在构建一个与reactJS中的一些api对话的web应用程序

我的应用程序有4个角色，管理员，主人，奴隶，婴儿

每个角色都可以看到比其他角色更多的内容，因此它们之间的菜单和视图略有不同

e、 g

我想知道构建此应用程序的最佳实践是什么：

我应该有4个不同的应用程序吗？通过这种方式，组件将是明确的，但每次我需要实现一个新的功能，我必须修改4个应用程序

---

如果这是唯一的方法，我如何根据登录后的角色调用正确的应用程序？

拥有四个独立的应用程序，其中包含大量重叠的代码/功能肯定不是最好的方法；这将导致大量不必要的重复

如果不同的角色只是添加/删除一些小的特性和功能，我只需要将这些元素的呈现包装成条件。例如：

renderAdminButton: function() {
   ( if this.props.user.role === 'admin' ) {
      return (
         <button />
      );
   }
}

---

拥有四个独立的应用程序，其中包含大量重叠的代码/功能肯定不是最好的方法；这将导致大量不必要的重复

如果不同的角色只是添加/删除一些小的特性和功能，我只需要将这些元素的呈现包装成条件。例如：

renderAdminButton: function() {
   ( if this.props.user.role === 'admin' ) {
      return (
         <button />
      );
   }
}

---

在按钮组件中，检查this.props.hide并返回null

    render() {
        if (this.props.hide) {return null;}
        return (
            <button>
                {this.props.btn.text}
            </button>
        );
    }

render（）{
if（this.props.hide）{return null；}
返回(
{this.props.btn.text}
);
}

在父组件中，包含每个按钮的逻辑隐藏属性

    render() {
        var hideAdminBtn = this.props.appState.userRole != 'admin';
        return (
            <JButton hide={hideAdminBtn} />
        );
    }

render（）{
var hideAdminBtn=this.props.appState.userRole！=“admin”；
返回(
);
}

在按钮组件中检查this.props.hide并返回null

    render() {
        if (this.props.hide) {return null;}
        return (
            <button>
                {this.props.btn.text}
            </button>
        );
    }

render（）{
if（this.props.hide）{return null；}
返回(
{this.props.btn.text}
);
}

在父组件中，包含每个按钮的逻辑隐藏属性

    render() {
        var hideAdminBtn = this.props.appState.userRole != 'admin';
        return (
            <JButton hide={hideAdminBtn} />
        );
    }

render（）{
var hideAdminBtn=this.props.appState.userRole！=“admin”；
返回(
);
}

您要做的是将每个访问类型作为一个道具，以便可以根据收到的道具类型呈现应用程序，最好是在

componentDidMount（）

。然后，您可以拥有一个

主视图

，它将接收道具并相应地决定渲染哪个视图。代码如下所示：

var MasterView = React.createClass({
  var roleType = this.props.role;
  render: function() {
    if(roleType === 'admin') {
      return (
        <AdminView />
      );
   }
});  

var AdminView = React.createClass({
  render: function() {
   return ( 
     <div>
        <EmployeeProfile />
        <EmployeeSalary />
        <BuyerRecords />
        <BalanceSheet />
        <Inventory />
        <Billing />
     </div>
   );
  }
});

var MasterView = React.createClass({
  render: function() {
   return ( 
     <div>
        <EmployeeProfile />
        <BuyerRecords />
        <BalanceSheet />
        <Inventory />
        <Billing />
     </div>
   );
  }
});


var SlaveView = React.createClass({
  render: function() {
   return ( 
     <div>
        <BuyerRecords />
        <BalanceSheet />
        <Billing />
     </div>
   );
  }
});

var ChildView = React.createClass({
  render: function() {
   return ( 
     <div>
        <Inventory />
        <Billing />
     </div>
   );
  }
});

var MasterView=React.createClass({
var roleType=this.props.role；
render:function（）{
如果（角色类型==='admin'）{
返回(
还有。应该有助于消除任何疑问：）
您要做的是将每个访问类型作为一个道具，以便您可以根据收到的道具类型呈现应用程序，最好是在
componentDidMount（）处
。然后您可以拥有一个
主视图
，该主视图将接收道具并相应地决定渲染哪个视图。代码如下所示：

var MasterView = React.createClass({
  var roleType = this.props.role;
  render: function() {
    if(roleType === 'admin') {
      return (
        <AdminView />
      );
   }
});  

var AdminView = React.createClass({
  render: function() {
   return ( 
     <div>
        <EmployeeProfile />
        <EmployeeSalary />
        <BuyerRecords />
        <BalanceSheet />
        <Inventory />
        <Billing />
     </div>
   );
  }
});

var MasterView = React.createClass({
  render: function() {
   return ( 
     <div>
        <EmployeeProfile />
        <BuyerRecords />
        <BalanceSheet />
        <Inventory />
        <Billing />
     </div>
   );
  }
});


var SlaveView = React.createClass({
  render: function() {
   return ( 
     <div>
        <BuyerRecords />
        <BalanceSheet />
        <Billing />
     </div>
   );
  }
});

var ChildView = React.createClass({
  render: function() {
   return ( 
     <div>
        <Inventory />
        <Billing />
     </div>
   );
  }
});

var MasterView=React.createClass({
var roleType=this.props.role；
render:function（）{
如果（角色类型==='admin'）{
返回(
还有。应该有助于消除任何疑问：）
如果我没有理解正确，这与拥有4个应用程序基本相同。以你为例，我需要4个不同的页眉组件，4个配置文件…对吗？不。你将拥有4个组件，
，
，
和
，每个组件都有相同的页眉或页脚组件。你只需要编写这些re-u可禁用组件一次，并将它们包含在任何父组件中，如
render:function（）{return（）；}
但我甚至在页眉和页脚上也有差异。每个视图都由许多组件组成，每个视图都有角色可以看到和其他角色看不到的东西。因此我认为你的解决方案与拥有4个应用程序没有什么不同。@ciaoben编辑了答案，希望这能更好地解释这个概念。如果我没有理解正确，这基本上是一样的有4个应用程序。以你为例，我需要4个不同的页眉组件，4个配置文件…对吗？不。你将有4个组件，
，
，
和
，它们中的每一个都有相同的页眉或页脚组件。你只需要编写一次这些可重用的组件，并将它们包含在任何pa中租用组件，如
render:function（）{return（）；}
但我甚至在页眉和页脚上也有差异。每个视图都由许多组件组成，每个视图都有角色可以看到的东西，而其他角色看不到。因此我认为你的解决方案与拥有4个应用程序没有什么不同。@ciaoben编辑了答案，希望这能更好地解释这个概念。