设计和构建一个多用途ReactJS应用 [英] Designing and structuring a multirole ReactJS application

问题描述

我的bulding的与一些API在reactJS会谈的Web应用程序。

I am bulding a web application that talks with some APIs in reactJS.

我的应用程序有4个角色，管理，主，从婴儿。

My app has 4 roles, admin, master, slave, baby.

每个角色可以看到的东西比别人多，所以菜单，并认为它们之间略有不同。

Every role can see something more than the others, so the the menus, and the view are slightly different between them.

例如

The navbar has:

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

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

I wanted to know what is the best practice for structuring this application:

我应该有4个型动物的应用程序？这样，部分将是明确的，但每次我需要实现一个新的功能，我必须修改4的应用程序。

Should I have 4 differents apps? This way the component would be clear, but everytime that I need to implement a new function I have to modify 4 apps.

如果这是唯一的办法，我怎么能叫基础上，登录后角色合适的应用程序？

If this is the only way, how can I call the right app based on the role after the login?

推荐答案

什么你需要做的是让每个接入类型为的道具的，所以你可以根据类型渲染应用道具获得，理想情况下 componentDidMount（）。然后，您可以有一个马西德威将接收道具，并相应地决定哪些视图渲染。在code将遵循沿着这样的：

What you'll want to do is make each access type as a prop so you can render the application based on the type of prop received, ideally at componentDidMount(). You can then have a MasterView that will receive the prop and decide accordingly which view to render. The code will follow along like this:

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

至于你有关实现新功能的关注，你应该打破您查看和逻辑成简单的和可重用的组件。例如你所有的接入类型可以共享一个共同的＆LT;页眉/＆GT; 和＆LT;页脚/＆GT; 组件以及＆LT;简介/＆GT; ＆LT;设置/＆GT; 等心你这些都可以进一步细分下来，这样当你在做任何组件的微小变化就会传播到所有的意见。类似的原则将适用于你的逻辑。记住要留 DRY

As for your concern about implementing new features, you should break down you view and logic into simple and reusable components. For example all your access type can share a common <Header /> and <Footer /> component as well as <Profile /> <Settings /> etc. Mind you these can be further broken down so that when you make a small change in any of the components it will propagate to all your views. Similar principles will apply to your logic as well. Remember to stay DRY.

编辑：

让我们假设应用程序正在为商店进行。通过这个门户网站（由组件的名称被起诉）中显示的所有数据是：

Let's assume that the app is being made for a store. All the data displayed via this portal(indicted by the component's name) are:

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

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

Now let's define the access level of each roles:

• 管理员可以访问应用程序的所有功能。


• 主可以查看所有，但员工的工资细节。


• 从站先后获得买家的纪录，库存和计费。


• 儿童只能查看库存和帐单的部分。

现在，这6个广泛的组件将被定义肯定会包括多个组件。只要确保每当你觉得像视图的特定部分将被用于其他地方，继续前进，使之成为一个单独的组件。

Now, these 6 broad components will be defined and will definitely comprise of multiple components. Just make sure that whenever you feel like a specific part of the view will be used elsewhere, go ahead and make it into a separate component.

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

Finally, the roles should render like this:

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个处理各方面的意见父组件。它们包括多个组件，并在例中的变化需要制成，它仅需要执行一次，这将在所有的角色反映

This way you have 4 parent components handling all the views. They comprise of multiple components and in case a change needs to made, it needs to be done only once and it will reflect in all the roles.

如果你决定要略加修改＆LT;库存/＆GT; 对于每个角色，可以选择渲染＆LT不同的子组件;库存/方式＆gt; 由角色决定的。

If you decide to have a slightly modified <Inventory /> for each role, you can choose to render different child components of <Inventory /> as determined by the role.

来吧，看看这个官方博客文章为好。应该帮助清除有任何怀疑：）

Go ahead and have a look at this official blog post as well. Should help clear any doubts :)

这篇关于设计和构建一个多用途ReactJS应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！