REACT:将组件传递给将执行组件操作的函数

时间:2018-10-16 05:44:39

标签: reactjs

我们正在尝试为系统构建通用的用户权限处理程序。我们目前正在使用REACT来构建组件。我自己没有编写代码,因此请忍受下面的“伪代码”作为我解释问题的方式。 (我问自己是因为我的团队的开发人员也不知道如何实现这一点。)

这个想法是有两个函数checkPermissions()和applyPermissions(),它们将根据用户的权限管理所有组件的行为。这包括但不限于以下内容:

  1. 确定是显示还是隐藏组件。
  2. 启用或禁用组件。
  3. 允许用户继续尝试执行的操作(例如删除记录,添加记录等)。
  4. 显示一条消息,告诉用户为何尝试取消操作。

checkPermissions()函数完成用户权限的所有数据收集和处理。一旦获取了必要的数据,它将决定组件的动作/响应/状态是什么,并为applyPermissions()函数准备响应数据,然后,applyPermissions()函数将执行响应。这意味着组件本身将被传递到checkPermissions()函数(连同用户数据),然后再次传递到applyPermissions()函数(与响应数据一起),在其中将实现所传递组件的假定响应。

现在,我们的问题是,使用REACT,这是否完全可能-在一个文件中创建/初始化组件,然后在另一个文件中处理其某些特定行为和响应。

(请参阅下面的概念。)

UIComponent tabMyContacts;
UIComponent tabMyMessages;
UIComponent tabMyRequests;

// some declarations of the UI component

// in this example, the following lines checks whether 
// these 3 components will be visible/displayed
// based on the user's permissions

checkPermissions(tabMyContacts, appuserId);
checkPermissions(tabMyMessages, appuserId);
checkPermissions(tabMyRequests, appuserId);

------ separate file ------

function checkPermissions(component, appuserId){

    //some process here to get the user permissions data
    //some process to prepare the responses based on the acquired data

    applyPermissions(component, componentResponse, componentResponseValue);

}

function applyPermissions(component, componentResponse, componentResponseValue) {

// componentResponseValue -- in this example, the possible values are TRUE or FALSE, 
//but this variable can also contain the prompt message or some other info

if (componentResponse == "SET_VISIBLE"){
        component.setVisible( componentResponseValue );
}
else if (componentResponse == "SET_ENABLED"){
        component.setEnabled( componentResponseValue ); 
}


}

这里的想法是不要在我们添加的每个组件中重复编写用户权限处理程序,因为我们打算实现一个用户权限系统,其中权限(“查看”,“编辑”,“添加”,“删除”)设置为“每一个”组件-即为每个字段,每个按钮等设置了用户权限-因此,您可以想象一下,每个组件以及每次添加或修改新组件时设置状态的繁琐程度

我需要知道REACT是否可以实现这种效果,并且有其他实现相同目标的实现方式。

0 个答案:

没有答案