Question

我正在构建一个与reactJS中的某些API进行对话的Web应用程序。

我的应用有4个角色，管理员，主人，奴隶，宝贝。

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

e.g。

The navbar has:

for the admin: 5 buttons
for the master: 4 buttons
for the salve: 3 buttons
for the baby: 2 buttons

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

我应该有4个不同的应用吗？这样组件就很清楚，但每次我需要实现一个新功能时，我都要修改4个应用程序。

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

Answer 1

拥有四个具有大量重叠代码/功能的独立应用肯定不是最好的方法;这将导致大量不必要的重复。

如果不同的角色只是添加/删除小的特性和功能，我只会将这些元素的渲染包装在条件中。例如：

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

然后在父app / component render函数内调用此函数。

但是，如果您真的希望为每个角色分别创建一个应用程序，则可以使用与此类似的函数有条件地呈现应用程序：

renderApp: function() {
   var apps = {
      admin: AdminApp,
      master: MasterApp,
      slave: SlaveApp,
      baby: BabyApp
   };

   return apps[this.props.user.role];
}

Answer 2

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

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

在您的父组件中包含每个按钮的逻辑隐藏道具。

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

Answer 3

您要做的是将每种访问类型设置为 prop ，以便您可以根据收到的道具类型呈现应用程序，最好是componentDidMount()。然后，您可以拥有一个MasterView来接收道具并相应地决定要渲染的视图。代码将如下所示：

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

至于您对实现新功能的关注，您应该将视图和逻辑分解为简单且可重用的组件。例如，您的所有访问类型都可以共享公共<Header />和<Footer />组件以及<Profile /> <Settings />等。请注意，这些可以进一步细分，以便在您制作时它将传播到您的所有视图的任何组件的小变化。类似的原则也适用于您的逻辑。请记住保持 DRY 。

修改

我们假设该应用是为商店制作的。通过此门户显示的所有数据（由组件名称起）均为：

<EmployeeProfile /> <EmployeeSalary /> <BuyerRecords /> <BalanceSheet /> <Inventory /> <Billing />

现在让我们定义每个角色的访问级别：

管理员可以访问该应用的所有功能。

Master可以查看员工的所有工资细节。

Slave可以访问买方的记录，广告资源和结算信息。

儿童只能查看广告资源和结算部分。

现在，将定义这6个广泛的组件，并且肯定包含多个组件。只要确保每当您认为视图的特定部分将在其他地方使用时，请继续将其转换为单独的组件。

最后，角色应该像这样呈现：

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> ); } });

这样您就有4个父组件处理所有视图。它们由多个组件组成，如果需要进行更改，则只需执行一次，它将反映所有角色。

如果您决定对每个角色稍加修改<Inventory />，则可以选择根据角色呈现<Inventory />的不同子组件。

继续看看这个官方blog post。应该有助于消除任何疑虑：）

设计和构建多角色ReactJS应用程序

3 个答案: