React framework-based user adding method and device, equipment and medium

Abstract

The invention provides a react framework-based user adding method and device, equipment and a medium. Comprising the steps of generating an initial component based on a preset react framework, and determining a data acquisition unit corresponding to the initial component; determining a to-be-added user and corresponding user data according to a data acquisition unit; according to the user data, generating a target user list corresponding to the to-be-added user; determining a target component according to the initial component and the target user list, and determining a tag list and a callback unit corresponding to the target component; determining a target user and corresponding target user data according to the target component and the target user list, and determining a target user tag corresponding to the target user according to the tag list; and adding the target user data and the target user tag to the target module according to the callback unit. Therefore, the development time is saved, the simplification of module maintenance is realized, and the uniformity of formats and styles of a plurality of projects under the same product is met.

Description

Technical Field

[0001] This application relates to the field of information processing technology, and in particular to a user addition method, apparatus, device, and medium based on the React framework. Background Technology

[0002] With the rapid development of the software industry, information management systems are constantly emerging across various sectors. React, as a mainstream front-end framework, is frequently chosen as the technology stack for front-end development.

[0003] In current user addition schemes, there are increasingly more scenarios where users are added to specific modules, systems, and projects, and the styles and functions of these member addition pages are largely the same.

[0004] However, existing methods for adding users suffer from issues such as redundant development and inconsistent formatting. Summary of the Invention

[0005] This application provides a user addition method, apparatus, device, and medium based on the React framework to solve the problems of repetitive development and inconsistent formatting in existing user addition methods.

[0006] Firstly, this application provides a user addition method based on the React framework, the method including:

[0007] Based on the preset React framework, generate initial components and determine the data acquisition units corresponding to the initial components;

[0008] Based on the data acquisition unit, determine the user to be added and its corresponding user data;

[0009] Based on user data, generate a list of target users corresponding to the users to be added;

[0010] Based on the initial component and target user list, determine the target component, and determine the corresponding tag list and callback unit for the target component;

[0011] Based on the target components and target user list, determine the target users and their corresponding target user data, and based on the tag list, determine the target user tags corresponding to the target users;

[0012] Based on the callback unit, add the target user data and target user tags to the target module.

[0013] In this embodiment of the application, a target user list corresponding to the user to be added is generated based on user data, including:

[0014] Identify the data source corresponding to the user data, and classify the user data by source according to the data source to obtain the user data corresponding to each data source;

[0015] Determine the tabs corresponding to each data source, and based on the user data corresponding to the data source, determine the tab user data corresponding to the tab.

[0016] Generate a list of target users based on tabs and tab user data.

[0017] In this embodiment of the application, a target user list is generated based on tab pages and tab user data, including:

[0018] Determine the preset page data capacity, and based on the data capacity of the tag user data and the page data capacity, determine the number of target pages corresponding to the tag page;

[0019] Based on the number of target pages, the tagged user data is stored in the page corresponding to the tagged page to obtain the target user list.

[0020] In this embodiment of the application, based on the number of target pages, the tagged user data is stored in the page corresponding to the tagged page to obtain the target user list, including:

[0021] Identify the business data and user identification information in the tagged user data, and determine the horizontal and vertical headers corresponding to the target user list;

[0022] Write the user identification information into the vertical header to obtain the vertical list content corresponding to the target user list, and write the corresponding business data into the horizontal header according to the user identification information to obtain the horizontal list content corresponding to the target user list.

[0023] Determine the target user list based on the contents of the vertical and horizontal lists.

[0024] In this embodiment of the application, after determining the target user and its corresponding target user data based on the target component and the target user list, and determining the target user tag corresponding to the target user based on the tag list, the method further includes:

[0025] Identify the target user data and the corresponding storage unit for the target component;

[0026] The target user data is stored in the storage unit.

[0027] In this embodiment of the application, adding target user data and target user tags to the target module according to the callback unit includes:

[0028] Determine the acquisition unit for the target component;

[0029] In response to the user's confirmation operation based on the acquisition unit, the target user data and target user tags are added to the target module according to the callback unit.

[0030] In this embodiment of the application, in response to the user's determination operation based on the acquisition unit, the target user data and target user tags are added to the target module according to the callback unit, including:

[0031] Based on the determined operation, determine the storage unit of the target component, and determine the target user data in the storage unit;

[0032] Determine the target user tags corresponding to the target user data, and add the target user data and target user tags to the target module according to the callback unit.

[0033] Secondly, this application provides a user addition device based on the React framework, the device comprising:

[0034] The component generation module is used to generate initial components based on a preset React framework and determine the data acquisition unit corresponding to the initial components;

[0035] The data determination module is used to determine the user to be added and its corresponding user data based on the data acquisition unit.

[0036] The list generation module is used to generate a list of target users corresponding to the users to be added, based on user data.

[0037] The component determination module is used to determine the target component based on the initial component and the target user list, and to determine the corresponding tag list and callback unit for the target component;

[0038] The tag determination module is used to determine the target user and its corresponding target user data based on the target component and the target user list, and to determine the target user tag corresponding to the target user based on the tag list;

[0039] Add a module to add target user data and target user tags to the target module based on the callback unit.

[0040] Thirdly, this application provides a computer device, including: a processor, and a memory communicatively connected to the processor;

[0041] The memory stores the instructions that the computer executes;

[0042] The processor executes computer execution instructions stored in memory to implement the method of this application.

[0043] Fourthly, this application provides a computer-readable storage medium storing program code, which, when executed by a processor, is used to implement the method of this application.

[0044] The user addition method, apparatus, device, and medium based on the React framework provided in this application generate an initial component based on a preset React framework and determine the data acquisition unit corresponding to the initial component; determine the user to be added and its corresponding user data based on the data acquisition unit; generate a target user list corresponding to the user to be added based on the user data; determine the target component based on the initial component and the target user list, and determine the tag list and callback unit corresponding to the target component; determine the target user and its corresponding target user data based on the target component and the target user list, and determine the target user tag corresponding to the target user based on the tag list; and add the target user data and target user tag to the target module according to the callback unit.

[0045] In this way, by installing the user addition component into each React project, it can be directly introduced and used when there is a relevant need, which saves the development time of front-end developers and simplifies code maintenance. At the same time, it enables front-end developers responsible for multiple React projects to use the same user addition component across projects, ensuring the consistency of style across multiple projects under the same product, and eliminating the need to modify multiple parts of the code synchronously when optimizing the component or adjusting the business. Attached Figure Description

[0046] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0047] Figure 1 A flowchart illustrating a user addition method based on the React framework, provided for an embodiment of this application;

[0048] Figure 2 A flowchart illustrating another user addition method based on the React framework provided in this application embodiment;

[0049] Figure 3 A schematic diagram of a user addition method based on the React framework provided in this application embodiment;

[0050] Figure 4 A schematic diagram of a user-adding device based on the React framework provided in this application embodiment;

[0051] Figure 5 This is a structural block diagram of a device for executing a user-added method based on the React framework according to an embodiment of this application.

[0052] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0053] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0054] The React framework is a framework for building JavaScript libraries. It adopts a component-based development approach, breaking down the user interface (UI) into independent, reusable components, which allows developers to build user interfaces more flexibly.

[0055] The tag list can be understood as a list of user roles, including a variety of preset user roles. Different roles are assigned to different users, and users can obtain different permissions. For example, there are administrator roles and ordinary member roles. Administrator roles can view and edit data, while ordinary member roles can only view data.

[0056] In current technologies, scenarios involving adding users to specific modules / systems / projects are becoming increasingly common. However, developers currently only create separate member addition pages for different systems or different pages within a system. These member addition pages have largely similar styles and functionalities, and there are currently no React-based member addition components available for front-end developers to install and use. This leads to front-end developers performing a lot of repetitive and redundant work. Many developers choose to develop the member addition functionality into a separate page and reuse it in projects for reuse, but this method cannot be used across projects or achieve style consistency across multiple projects.

[0057] To address the aforementioned issues, this application provides a user addition method based on the React framework. This method allows the member addition component to be installed in various React projects and directly used when needed, saving development time for front-end developers and simplifying code maintenance. Furthermore, this invention enables front-end developers responsible for multiple React projects to use the same member addition component across projects, ensuring a consistent style across multiple projects within the same product. Component optimization or business adjustments do not require simultaneous modifications to multiple code sections. The component supports multi-dimensional tab-based display of the user list in a pop-up format and also allows users to pass in a role list, facilitating the assignment of specific roles while adding users.

[0058] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will now be described with reference to the accompanying drawings.

[0059] Figure 1 This is a flowchart illustrating a user addition method based on the React framework, provided as an embodiment of this application. Figure 1 As shown, the user addition method based on the React framework may include the following steps:

[0060] S110. Based on the preset React framework, generate the initial component and determine the data acquisition unit corresponding to the initial component.

[0061] The default React framework allows for component-based development, breaking down the user interface (UI) into independent, reusable components.

[0062] The data acquisition unit is the unit in the initial component used to acquire user data. For example, it could be a function in a React component that receives user data requests.

[0063] Based on this, by generating an initial component and determining the corresponding data acquisition unit, the user data of the user to be added can be determined according to the data acquisition unit, thereby realizing the addition of user data based on React components.

[0064] S120. Based on the data acquisition unit, determine the user to be added and its corresponding user data.

[0065] The users to be added can be understood as users who may need to be added to the target module later. User data may include the user's corresponding business data and the user's identification data.

[0066] Based on this, the corresponding users to be added and user data are determined through the data acquisition unit. Then, a target user list is generated based on the users to be added and user data, and the target component is determined based on the target user list. Based on the target component, React front-end project developers can use the ready-made target component, thereby saving a lot of front-end development time and achieving style consistency for the same scenario.

[0067] S130. Based on the user data, generate a list of target users corresponding to the users to be added.

[0068] The target user list is a user table that includes the users to be added and their user data. It is used to display user data so that the target users and their user data to be added to the target module can be determined later based on the target user list. For example, the target user list can be a table that supports row selection and pagination of the user list.

[0069] Based on this, by identifying user data, a target user list for displaying this user data is generated, so that target users and their data can be identified subsequently based on the target user list.

[0070] S140. Based on the initial component and target user list, determine the target component, and determine the corresponding tag list and callback unit for the target component.

[0071] The target component includes a list of target users, enabling the selection and confirmation of user data. As an independent React component, it can be installed in various React projects and directly imported for use when relevant needs arise. Furthermore, the target component allows cross-project use of the user addition component, ensuring a consistent style across multiple projects within the same product.

[0072] The tag list is a list of roles corresponding to users, including a variety of preset user roles.

[0073] Callback units are used to add a specific target user and their user data to a target module, thereby adding the user. For example, a callback unit can be a callback function in the target component. A callback function is a function that is passed as a parameter and can call a predefined function to process the result after the asynchronous operation is completed. It is usually used in scenarios such as handling events, performing asynchronous operations, or responding to user input.

[0074] Based on this, by generating the users to be added and their user data, a corresponding target user list is generated. This target user list is then added to the initial component, thus generating the target component. Subsequently, based on the independent target component, the user addition function in the React framework can be made universal across projects. At the same time, the tag list and callback unit corresponding to the target component are determined so that the corresponding user tags can be determined later, and the target user can be sent to the target module according to the callback unit.

[0075] S150. Based on the target component and target user list, determine the target user and its corresponding target user data, and based on the tag list, determine the target user tag corresponding to the target user.

[0076] Among them, the target users are the users who need to be added to the target module, determined based on the target user list, and the target user data is the user data corresponding to the target users.

[0077] Based on this, the target user is identified through the target user list in the target component, and the user tag corresponding to the target user is determined so that the target user data can be added to the target module in the future. This realizes the addition of users based on React components and the determination of the corresponding permissions of target users based on user tags.

[0078] S160. Based on the callback unit, add the target user data and target user tags to the target module.

[0079] The target module is the module that needs to be added by the user; for example, it could be different projects under the same product.

[0080] Based on this, the target user data is added to the target module through the callback unit, thereby realizing the general addition of user data according to the independent React component.

[0081] Based on the feasible implementation of S130 described above, this application further provides a process for determining the corresponding tab based on the source of user data, and determining the target user list based on the tab:

[0082] Identify the data source corresponding to the user data, and classify the user data by source according to the data source to obtain the user data corresponding to each data source;

[0083] Determine the tabs corresponding to each data source, and based on the user data corresponding to the data source, determine the tab user data corresponding to the tab.

[0084] Generate a list of target users based on tabs and tab user data.

[0085] The data source can be data from different dimensions, and the tab page can be a tab page used to switch between content of the same level tab. That is, when a tab is selected, the content area of ​​the tab displays the content of the corresponding tab.

[0086] Based on this, by determining the data source corresponding to the acquired data, the tab page corresponding to the user data can be further determined according to the data source, so as to realize the support for multi-dimensional tab page display of the user list. The data acquisition unit is passed in as an array, and the member list table is rendered into a table with multiple tabs, with each different data source corresponding to a different tab page.

[0087] Based on the feasible implementation of S130 described above, this application further provides a process for determining the user data capacity corresponding to each display page by determining the page data capacity:

[0088] Determine the preset page data capacity, and based on the data capacity of the tag user data and the page data capacity, determine the number of target pages corresponding to the tag page;

[0089] Based on the number of target pages, the tagged user data is stored in the page corresponding to the tagged page to obtain the target user list.

[0090] The preset page data capacity is a pre-defined capacity of data that each display page can display. It can be set by the user or determined by other methods. For example, during use, the user can change the current page data capacity to 20 or 30, thereby changing the page data capacity according to actual needs.

[0091] The target number of pages is the number of pages displayed corresponding to one tab.

[0092] Based on this, by determining the page data capacity, and considering the user data capacity corresponding to the tab and the page data capacity that the page can display, the number of target pages corresponding to the tab is determined, and the user data corresponding to the tab is stored in these target pages, thereby obtaining the target user list.

[0093] Based on the feasible implementation of S130 described above, this application further provides a process for storing tagged user data into a target user list by determining the business data and user identification information in the tagged user data:

[0094] Identify the business data and user identification information in the tagged user data, and determine the horizontal and vertical headers corresponding to the target user list;

[0095] Write the user identification information into the vertical header to obtain the vertical list content corresponding to the target user list, and write the corresponding business data into the horizontal header according to the user identification information to obtain the horizontal list content corresponding to the target user list.

[0096] Determine the target user list based on the contents of the vertical and horizontal lists.

[0097] Among them, business data is the business information corresponding to the user, and user identification information is the identification information used to identify the user, such as the user's name, phone number, etc.; that is, according to specific business needs, the column information required for the user list is defined, and according to the user's identification information, the row information corresponding to the user in the list is determined, thereby determining the user data corresponding to the user in the target user list based on the column information and row information.

[0098] Based on this, the column information of the user list is determined by the business data in the tagged user data, and the row information of the user list is determined by the user identification information in the tagged user data, thereby storing the tagged user data in the user list and obtaining the target user list.

[0099] Based on the feasible implementation of S130 described above, this application further provides a process for storing target user data and target user tags according to the storage unit:

[0100] Identify the target user data and the corresponding storage unit for the target component;

[0101] The target user data is stored in the storage unit.

[0102] The storage unit is a unit in the target component used to store user data. For example, it can be a user selection variable in the component. When the target user is determined, the user data is recorded in the user selection variable. When the number of selected users is greater than 1, a drop-down menu of the role list is displayed in the lower left corner of the table to determine the tag role corresponding to the current user. If the user has determined the corresponding tag role, it is displayed directly. If the user has not determined the corresponding tag role, the first tag role in the "role list" is displayed by default, and the user can modify it and save the selected role information in a variable.

[0103] Based on this, by determining the storage units in the target component, the target users to be added to the target module, as determined by the developers based on the target user list, are stored in the storage units so that user data can be added later based on the storage units.

[0104] In this embodiment, in order to solve the problems of repetitive development and inconsistent formatting when adding users, an initial component can be determined through a preset React framework, and a corresponding target user list can be generated based on the user data obtained by the data acquisition unit. Thus, a target component is obtained based on the initial component and the target user list. The target component, as an encapsulated user addition component, can be used across projects and achieve style consistency across multiple projects.

[0105] In this way, by extracting the user-added page into a component and publishing it, a lot of time for front-end developers can be saved and the style can be made consistent. This allows React front-end project developers to use ready-made user-added components to save a lot of front-end development time and achieve style consistency in the same scenario.

[0106] Figure 2 This is a flowchart illustrating another user-adding method based on the React framework, provided as an embodiment of this application. Figure 2 As shown, the user addition method based on the React framework may include the following steps:

[0107] S210. Based on the preset React framework, generate the initial component and determine the data acquisition unit corresponding to the initial component.

[0108] S220. Based on the data acquisition unit, determine the user to be added and its corresponding user data.

[0109] S230. Based on the user data, generate a list of target users corresponding to the users to be added.

[0110] S240. Based on the initial component and target user list, determine the target component, and determine the corresponding tag list and callback unit for the target component.

[0111] S250. Based on the target component and target user list, determine the target user and its corresponding target user data, and based on the tag list, determine the target user tag corresponding to the target user.

[0112] In this embodiment, the specific implementation of steps S210 to S250 can be found in the content of the foregoing embodiments, and will not be repeated here.

[0113] S260, Determine the acquisition unit of the target component.

[0114] The acquisition unit is a unit in the target component used to acquire the developer's action of adding a member. For example, the acquisition unit could be the "OK" button of the target component, with the target user list as the content of the pop-up. When the developer clicks the "Add Member" button in the target component, the pop-up is displayed, and the "OK" button in the pop-up is the acquisition unit of the target component used to acquire the developer's action of adding a member.

[0115] S270. In response to the user's confirmation operation based on the acquisition unit, add the target user data and target user tag to the target module according to the callback unit.

[0116] In this context, "user" can be understood as "developer," specifically the developer who needs to add user data to the target module.

[0117] The confirmation action can be performed by the developer clicking the "OK" button in the pop-up window. This triggers the "Member Addition" callback function, which takes the selected user list and role information as parameters. After the callback function is successfully triggered, the pop-up window is closed.

[0118] Based on this, by determining the user's confirmation operation on the acquisition unit, it is determined that the target user needs to be added to the target module. Then, according to the callback unit, the user data is added.

[0119] Based on the feasible implementation of S270 described above, this application further provides a process for determining the user data stored in the storage unit through a callback unit, thereby adding the data to the target module:

[0120] Based on the determined operation, determine the storage unit of the target component, and determine the target user data in the storage unit;

[0121] Determine the target user tags corresponding to the target user data, and add the target user data and target user tags to the target module according to the callback unit.

[0122] In this context, a storage unit is a unit within the target component used to store user data; for example, it could be a user-selected variable within the component.

[0123] Based on this, when the developer clicks the "OK" button in the pop-up window, the target user data in "User Selected Variables" and "Role Information" (i.e., tag information) are used as parameters to call the callback function of the "Add Button". The front-end developer can use this function to initiate a request to add members, thereby adding the target user data and target user tags to the target module.

[0124] Figure 3 This application provides a schematic diagram of a user addition method based on the React framework, as illustrated in an embodiment of the present application. Figure 3 As shown, by defining a React component and rendering an "Add User" button and a user list pop-up within the component, clicking the "Add User" button displays the user list pop-up, and clicking the "OK" button in the pop-up adds user data according to the callback function, thus obtaining an independent user addition component.

[0125] In this embodiment, a separate user addition component can be encapsulated, and the "user data request function" and "member addition callback function" can be passed to the member addition component to display the member list in the form of a pop-up. The component supports multi-dimensional tab display of the user list in the form of a pop-up, and can also pass in a role list so that users can assign specific roles when adding users.

[0126] In this way, a user-add component based on React can be installed and used by front-end developers, saving them a lot of time and ensuring a consistent style.

[0127] Figure 4 This is a schematic diagram of the structure of a user-adding device 400 based on the React framework, provided as an embodiment of this application. Figure 4 As shown, the user addition device 400 based on the React framework includes: a component generation module 410, a data determination module 420, a list generation module 430, a component determination module 440, a tag determination module 450, and an addition module 460.

[0128] The component generation module 410 is used to generate initial components based on a preset React framework and determine the data acquisition unit corresponding to the initial components.

[0129] The data determination module 420 is used to determine the user to be added and its corresponding user data based on the data acquisition unit;

[0130] The list generation module 430 is used to generate a list of target users corresponding to the users to be added based on user data;

[0131] The component determination module 440 is used to determine the target component based on the initial component and the target user list, and to determine the tag list and callback unit corresponding to the target component;

[0132] The tag determination module 450 is used to determine the target user and its corresponding target user data based on the target component and the target user list, and to determine the target user tag corresponding to the target user based on the tag list;

[0133] Add module 460 to add target user data and target user tags to the target module based on the callback unit.

[0134] In this embodiment of the application, the list generation module 430 can also be specifically used for:

[0135] Identify the data source corresponding to the user data, and classify the user data by source according to the data source to obtain the user data corresponding to each data source;

[0136] Determine the tabs corresponding to each data source, and based on the user data corresponding to the data source, determine the tab user data corresponding to the tab.

[0137] Generate a list of target users based on tabs and tab user data.

[0138] In this embodiment of the application, the list generation module 430 can also be specifically used for:

[0139] Determine the preset page data capacity, and based on the data capacity of the tag user data and the page data capacity, determine the number of target pages corresponding to the tag page;

[0140] Based on the number of target pages, the tagged user data is stored in the page corresponding to the tagged page to obtain the target user list.

[0141] In this embodiment of the application, the list generation module 430 can also be specifically used for:

[0142] Identify the business data and user identification information in the tagged user data, and determine the horizontal and vertical headers corresponding to the target user list;

[0143] Write the user identification information into the vertical header to obtain the vertical list content corresponding to the target user list, and write the corresponding business data into the horizontal header according to the user identification information to obtain the horizontal list content corresponding to the target user list.

[0144] Determine the target user list based on the contents of the vertical and horizontal lists.

[0145] In this embodiment of the application, the user addition device 400 based on the React framework can also be specifically used for:

[0146] Identify the target user data and the corresponding storage unit for the target component;

[0147] The target user data is stored in the storage unit.

[0148] In this embodiment of the application, the adding module 460 can also be specifically used for:

[0149] Determine the acquisition unit for the target component;

[0150] In response to the user's confirmation operation based on the acquisition unit, the target user data and target user tags are added to the target module according to the callback unit.

[0151] In this embodiment of the application, the adding module 460 can also be specifically used for:

[0152] Based on the determined operation, determine the storage unit of the target component, and determine the target user data in the storage unit;

[0153] Determine the target user tags corresponding to the target user data, and add the target user data and target user tags to the target module according to the callback unit.

[0154] Figure 5 This is a schematic diagram of the device provided in an embodiment of this application. Figure 5 As shown, the device 500 includes:

[0155] The device 500 may include a processor 501 with one or more processing cores, a memory 502 with one or more computer-readable storage media, a communication component 503, and other components. The processor 501, memory 502, and communication component 503 are connected via a bus 504.

[0156] In the specific implementation process, at least one processor 501 executes computer execution instructions stored in memory 502, causing at least one processor 501 to execute the user-added method based on the React framework as described above.

[0157] The specific implementation process of processor 501 can be found in the above method embodiments, and its implementation principle and technical effect are similar. It will not be repeated here.

[0158] In the above Figure 5 In the illustrated embodiments, it should be understood that the processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the methods disclosed in this application can be directly manifested as being executed by a hardware processor, or executed by a combination of hardware and software modules within the processor.

[0159] The memory may include random access memory (RAM) and may also include non-volatile memory (NVM), such as at least one disk storage device.

[0160] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, the buses shown in the accompanying drawings are not limited to a single bus or a single type of bus.

[0161] In some embodiments, a computer program product is also proposed, comprising a computer program or instructions that, when executed by a processor, implement the steps in any of the above-described user-add methods based on the React framework.

[0162] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0163] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be performed by instructions, or by instructions controlling related hardware. These instructions can be stored in a computer-readable storage medium and loaded and executed by a processor.

[0164] Therefore, embodiments of this application provide a computer-readable storage medium storing a plurality of program codes that can be loaded by a processor to execute the steps in any of the user addition methods based on the React framework provided in embodiments of this application.

[0165] The storage medium may include: read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0166] According to one aspect of this application, a computer program product or computer program is provided, the computer program product or computer program including computer instructions stored in a computer-readable storage medium.

[0167] Since the instructions stored in the storage medium can execute the steps in any of the user addition methods based on the React framework provided in the embodiments of this application, the beneficial effects that any of the user addition methods based on the React framework provided in the embodiments of this application can achieve can be realized. For details, please refer to the previous embodiments, which will not be repeated here.

[0168] Finally, it should be noted that other embodiments of the invention will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This invention is intended to cover any variations, uses, or adaptations of the invention that follow the general principles of the invention and include common knowledge or customary techniques in the art not disclosed herein, and is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of the invention is limited only by the appended claims.

[0169] It should be understood that this application is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A user addition method based on the React framework, characterized in that, The method includes: Based on the preset React framework, an initial component is generated, and the data acquisition unit corresponding to the initial component is determined; The user to be added and his / her corresponding user data are determined by the data acquisition unit. Based on the user data, generate a target user list corresponding to the user to be added; Based on the initial component and the target user list, determine the target component, and determine the tag list and callback unit corresponding to the target component; Based on the target component and the target user list, determine the target user and its corresponding target user data, and based on the tag list, determine the target user tag corresponding to the target user; According to the callback unit, the target user data and the target user tag are added to the target module.

2. The method according to claim 1, characterized in that, The step of generating the target user list corresponding to the user to be added based on the user data includes: The data source corresponding to the user data is determined, and the user data is classified according to the data source to obtain the user data corresponding to each data source. Determine the tab page corresponding to each of the data sources, and determine the tab user data corresponding to the tab page based on the user data corresponding to the data source; The target user list is generated based on the tab page and the tab user data.

3. The method according to claim 2, characterized in that, The step of generating the target user list based on the tab page and the tab user data includes: Determine the preset page data capacity, and based on the data capacity of the tag user data and the page data capacity, determine the number of target pages corresponding to the tag page; Based on the number of target pages, the tagged user data is stored in the page corresponding to the tagged page to obtain the target user list.

4. The method according to claim 3, characterized in that, The step of storing the tagged user data into the page corresponding to the tagged page based on the number of target pages, to obtain the target user list, includes: Determine the business data and user identification information in the tagged user data, and determine the horizontal and vertical headers corresponding to the target user list; Write the user identification information into the vertical header to obtain the vertical list content corresponding to the target user list, and write the corresponding business data into the horizontal header according to the user identification information to obtain the horizontal list content corresponding to the target user list. The target user list is determined based on the contents of the vertical list and the contents of the horizontal list.

5. The method according to claim 1, characterized in that, After determining the target user and its corresponding target user data based on the target component and the target user list, and determining the target user tag corresponding to the target user based on the tag list, the method further includes: Determine the target user data and the storage unit corresponding to the target component; The target user data is stored in the storage unit.

6. The method according to claim 1, characterized in that, The step of adding the target user data and the target user tag to the target module according to the callback unit includes: Determine the acquisition unit of the target component; In response to the user's confirmation operation based on the acquisition unit, the target user data and the target user tag are added to the target module according to the callback unit.

7. The method according to claim 6, characterized in that, The step of adding the target user data and the target user tag to the target module according to the callback unit in response to the user's determination operation based on the acquisition unit includes: Based on the determination operation, the storage unit of the target component is determined, and the target user data in the storage unit is determined; Determine the target user tag corresponding to the target user data, and add the target user data and the target user tag to the target module according to the callback unit.

8. A user addition device based on the React framework, characterized in that, The device includes: The component generation module is used to generate initial components based on a preset React framework and determine the data acquisition unit corresponding to the initial components. The data determination module is used to determine the user to be added and its corresponding user data based on the data acquisition unit. The list generation module is used to generate a list of target users corresponding to the user to be added based on the user data. The component determination module is used to determine the target component based on the initial component and the target user list, and to determine the tag list and callback unit corresponding to the target component; The tag determination module is used to determine the target user and its corresponding target user data based on the target component and the target user list, and to determine the target user tag corresponding to the target user based on the tag list; An add module is used to add the target user data and the target user tag to the target module according to the callback unit.

9. A device, characterized in that, include: One or more processors; Memory; One or more programs, wherein the one or more programs are stored in memory and configured to be executed by one or more processors, the one or more programs being configured to perform the method as claimed in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores program code that can be called by a processor to perform the method as claimed in any one of claims 1 to 7.

Images