React component dynamic switching method and terminal

Abstract

The invention discloses a React component dynamic switching method and a terminal, and the method comprises the steps: obtaining a component switching request of a page, transmitting the identification information of a to-be-switched target component to a switching component, and carrying out the preprocessing; the switching component is based on a ClonneElement method of React, and all switchable components in the current page are wrapped by a label of the switching component; the switching component confirms the state attribute of the target component according to the identification information of the target component; cloning the target component, injecting the state attribute and generating an instance, and performing rendering display on the switchable component; according to the method, the components are dynamically switched on the basis of a clone Element method, the distinguishing of service codes and the component switching codes is realized by packaging the component switching codes and unifying external interfaces, and the same set of switching codes are reused by all pages, so that the code quality is improved, the code readability and maintainability are improved, the time of developers is saved, and the development efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of Web front-end applications, and in particular to a React component dynamic switching method and a terminal. Background Art

[0002] Divide and conquer is an important idea in software engineering and the cornerstone of complex system development and maintenance. The current modularization and componentization of the front-end are based on the idea of ​​divide and conquer. Componentization is the core idea of ​​React. A React page is usually assembled from various components. Due to different usage scenarios, a page often needs to switch different components according to user operations.

[0003] A general component switching process is as follows: Figure 1 As shown. To switch components, you first need to initialize the relevant states. For example, initialize the default displayed components, initialize the parameters passed into the components, and so on. In a page, switching events can be triggered by various operations. For example, the user clicks a button to switch components, or switches components through parameters in the URL address bar. Before switching components, some preprocessing operations are usually required. For example, it is necessary to clean up the components to be hidden, set initial values ​​for the components to be displayed, and so on. After the preprocessing operations are completed, the components are switched. The so-called switching components means that in a batch of components, a certain component is displayed as required and other components are hidden. Finally, the specified components are rendered on the page.

[0004] The current common practice is to control the rendering and updating of the page through React's state mechanism, and respond to user operations through React's event mechanism. Then, in the corresponding event handling method, switch preprocessing is first performed, and then the display state of the component is modified. Finally, when rendering, the corresponding CSS properties are set according to the display state of the component to control whether the component is displayed.

[0005] like Figure 2 As shown, in Figure 2 In the code shown, lines 6 to 10 are used for initialization settings of component switching. Line 6 saves the id of the component to be displayed through the view state variable. Lines 7 to 10 save the initialization data of the component through the componentsData state variable.

[0006] Lines 12 to 30 are a click event response method. It is bound to the toggle button in line 34, and React will automatically execute the method when the button is clicked. Inside the method, line 13 first gets the id of the next component to be displayed. Lines 15 to 27 preprocess the component before switching it. The preprocessing operation mainly clears the current component data and sets the data of the next component. Finally, line 29 updates the id of the current component to be displayed.

[0007] Lines 36 to 43 are used to render components. In order to control the display status of Component1 and Component2 without intruding on these two components, we wrap these two components with an additional div tag. The style attribute of the wrapping div tag is set according to the view state variable to control the display or hiding of the target component and achieve the switching effect of the component.

[0008] Conventional component switching solutions have the following disadvantages:

[0009] 1. The switching-related codes are mixed with other business codes, which makes them difficult to read and maintain.

[0010] 2. Similar code needs to be written in each page that requires component switching function, which makes the page code bloated.

[0011] 3. The level of developers is different. For the same function, the codes written by developers of different levels vary greatly. Even if the same developer writes the same switching function in different pages, the codes are slightly different. This also leads to low code quality and difficulty in maintenance. Figure 2 The code shown in is the optimized best practice code, which is concise and has a clear process. Summary of the invention

[0012] The technical problem to be solved by the present invention is to provide a method and a terminal for dynamic switching of React components, which can make the code easier to maintain while realizing the dynamic switching of React components.

[0013] In order to solve the above technical problems, the technical solution adopted by the present invention is:

[0014] A method for dynamically switching a React component comprises the following steps:

[0015] S1. Obtain a component switching request of a page, pass the identification information of the target component to be switched to the switching component, and perform preprocessing;

[0016] The switching component is based on the cloneElement method of React, and all switchable components in the current page are wrapped by the tag of the switching component;

[0017] S2, the switching component confirms the state attribute of the target component according to the identification information of the target component;

[0018] S3. Clone the target component, inject the state attribute and generate an instance, and render and display the switchable component.

[0019] In order to solve the above technical problems, another technical solution adopted by the present invention is:

[0020] A React component dynamically switches terminals, comprising a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor implements the following steps when executing the computer program:

[0021] S1. Obtain a component switching request of a page, pass the identification information of the target component to be switched to the switching component, and perform preprocessing;

[0022] The switching component is based on the cloneElement method of React, and all switchable components in the current page are wrapped by the tag of the switching component;

[0023] S2, the switching component confirms the state attribute of the target component according to the identification information of the target component;

[0024] S3. Clone the target component, inject the state attribute and generate an instance, and render and display the switchable component.

[0025] The beneficial effects of the present invention are as follows: a method and terminal for dynamically switching a React component of the present invention, by defining a switching component based on the cloneElement method of React, clones and injects state attributes to the switchable component, and realizes the rendering and display of the switchable component, that is, dynamically switching components based on the cloneElement method, encapsulating component switching codes, unifying external interfaces, realizing the distinction between business codes and component switching codes, reusing the same set of switching codes for each page, and using the same set of switching logic for each developer, thereby improving code quality, improving code readability and maintainability, saving developer time, and accelerating development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 A schematic diagram of a conventional component switching process described in the background technology of the present invention;

[0027] Figure 2A schematic diagram of a conventional component switching method code described in the background technology of the present invention;

[0028] Figure 3 This is an example diagram of the MultiView component interface of the first embodiment of the present invention;

[0029] Figure 4 This is a code example diagram of using MultiView to wrap the target component in the first embodiment of the present invention;

[0030] Figure 5 This is a code example diagram of the external interface of the MultiView component in the first embodiment of the present invention;

[0031] Figure 6 This is a code example diagram of the getView method of the MultiView component in the first embodiment of the present invention;

[0032] Figure 7 This is an example diagram of the initialization code of the MultiView component in the first embodiment of the present invention;

[0033] Figure 8 This is an example diagram of the attribute change operation code of the MultiView component in the first embodiment of the present invention;

[0034] Fig. 9 This is a diagram showing an example of rendering code of the MultiView component in the first embodiment of the present invention;

[0035] Fig.10 This is a code example diagram of the React component used as an HTML tag in the first embodiment of the present invention;

[0036] Fig.11 This is a code example diagram used by the multiview_actived attribute in the first embodiment of the present invention;

[0037] Fig.12 A schematic diagram of a flow chart of a method for dynamically switching a React component according to an embodiment of the present invention;

[0038] Fig.13 This is a code example diagram of the default usage scenario of the MultiView component in the second embodiment of the present invention;

[0039] Fig.14 This is a code example diagram of a scene using array subscript switching of the MultiView component in the second embodiment of the present invention;

[0040] Fig.15 This is a code example diagram of a scene in which a component name is switched using a MultiView component in Embodiment 2 of the present invention;

[0041] Fig.16 This is a structural diagram of a React component dynamically switching terminals according to an embodiment of the present invention;

[0042] Description of labels:

[0043] 1. A React component dynamically switches terminals; 2. Processor; 3. Memory. DETAILED DESCRIPTION

[0044] In order to explain the technical content, achieved objectives and effects of the present invention in detail, the following is an explanation in combination with the implementation modes and the accompanying drawings.

[0045] Please refer to Fig.12 , a method for dynamically switching a React component, comprising the steps of:

[0046] S1. Obtain a component switching request of a page, pass the identification information of the target component to be switched to the switching component, and perform preprocessing;

[0047] The switching component is based on the cloneElement method of React, and all switchable components in the current page are wrapped by the tag of the switching component;

[0048] S2, the switching component confirms the state attribute of the target component according to the identification information of the target component;

[0049] S3. Clone the target component, inject the state attribute and generate an instance, and render and display the switchable component.

[0050] From the above description, it can be seen that the beneficial effects of the present invention are: a method and terminal for dynamic switching of React components of the present invention, by defining a switching component based on the cloneElement method of React, clones and injects state attributes of switchable components, and realizes the rendering and display of switchable components, that is, dynamic switching of components is performed based on the cloneElement method, and the distinction between business code and component switching code is realized by encapsulating component switching code and unifying external interfaces. Each page reuses the same set of switching codes, and each developer uses the same set of switching logic, thereby improving code quality, improving code readability and maintainability, saving developer time, and accelerating development efficiency.

[0051] Furthermore, the switching component is implemented in a React Component manner.

[0052] From the above description, we can see that the switching component must be implemented in React Component mode instead of hooks mode, so as to support pages written in both React Component mode and React Hook mode.

[0053] Furthermore, all switchable components in the current page are wrapped by the tag of the switching component. Specifically, all switchable components of the current page are wrapped in advance by the component tag of the switching component, so that when the program is running, the switchable components are passed into the switching component as children attributes, so that the switching component can clone the switchable components based on the cloneElement method and inject the state attribute.

[0054] From the above description, we can know that in React, we define a component class that inherits from React's Component class, and then we can use this class name as an html tag. We wrap the switchable component with the component tag of the switching component, separate the common switching code from other business logic, and reuse them, making the code more concise, intuitive, and easy to maintain. When used specifically, the switchable component will be passed into the switching component as the children attribute of the switching component to achieve subsequent logic cloning, attribute injection, switching display and other processing.

[0055] Furthermore, when the switchable components are transferred into the switching components, the switchable components are formed into an array by an arrangement method.

[0056] From the above description, it can be seen that when the switchable component is passed into the switching component, the switchable attributes are formed into an array through the arrangement method, such as the React.Children.toArray method, which is easy to manage. When the component is switched later, the component is cloned by traversing the array to effectively avoid omissions. When switching components, the identifier of the target component passed in can be the array subscript or the switchable component name, which is simpler and more regular.

[0057] Furthermore, step S3 is specifically as follows:

[0058] In the render method, if the target state to be switched by the target component is the activated state, the display attribute of the CSS of the target component is set to block, otherwise it is set to none, and the switchable component is embedded in the div tag returned by the render method;

[0059] The switchable component is cloned through the cloneElement method, and the state attribute is injected according to the target state to generate an instance for rendering and display.

[0060] From the above description, we can know that in CSS style, to display a label, you need to set the display attribute of the label to "block", and to hide a label, you need to set the display attribute of the label to "none". When rendering, the display attribute of the CSS style of the component is determined by injecting the state attribute into the switchable component.

[0061] Please refer to Fig.16 A React component dynamically switches terminals, comprising a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor implements the following steps when executing the computer program:

[0062] S1. Obtain a component switching request of a page, pass the identification information of the target component to be switched to the switching component, and perform preprocessing;

[0063] The switching component is based on the cloneElement method of React, and all switchable components in the current page are wrapped by the tag of the switching component;

[0064] S2, the switching component confirms the state attribute of the target component according to the identification information of the target component;

[0065] S3. Clone the target component, inject the state attribute and generate an instance, and render and display the switchable component.

[0066] From the above description, it can be seen that the beneficial effects of the present invention are: a method and terminal for dynamic switching of React components of the present invention, by defining a switching component based on the cloneElement method of React, clones and injects state attributes of switchable components, and realizes the rendering and display of switchable components, that is, dynamic switching of components is performed based on the cloneElement method, and the distinction between business code and component switching code is realized by encapsulating component switching code and unifying external interfaces. Each page reuses the same set of switching codes, and each developer uses the same set of switching logic, thereby improving code quality, improving code readability and maintainability, saving developer time, and accelerating development efficiency.

[0067] Furthermore, the switching component is implemented in a React Component manner.

[0068] From the above description, we can see that the switching component must be implemented in React Component mode instead of hooks mode, so as to support pages written in both React Component mode and React Hook mode.

[0069] Furthermore, all switchable components in the current page are wrapped by the tag of the switching component. Specifically, all switchable components of the current page are wrapped in advance by the component tag of the switching component, so that when the program is running, the switchable components are passed into the switching component as children attributes, so that the switching component can clone the switchable components based on the cloneElement method and inject the state attribute.

[0070] From the above description, we can know that in React, we define a component class that inherits from React's Component class, and then we can use this class name as an html tag. We wrap the switchable component with the component tag of the switching component, separate the common switching code from other business logic, and reuse them, making the code more concise, intuitive, and easy to maintain. When used specifically, the switchable component will be passed into the switching component as the children attribute of the switching component to achieve subsequent logic cloning, attribute injection, switching display and other processing.

[0071] Furthermore, when the switchable components are transferred into the switching components, the switchable components are formed into an array by an arrangement method.

[0072] From the above description, it can be seen that when the switchable component is passed into the switching component, the switchable attributes are formed into an array through the arrangement method, such as the React.Children.toArray method, which is easy to manage. When the component is switched later, the component is cloned by traversing the array to effectively avoid omissions. When switching components, the identifier of the target component passed in can be the array subscript or the switchable component name, which is simpler and more regular.

[0073] Furthermore, step S3 is specifically as follows:

[0074] In the render method, if the target state to be switched by the target component is the activated state, the display attribute of the CSS of the target component is set to block, otherwise it is set to none, and the switchable component is embedded in the div tag returned by the render method;

[0075] The switchable component is cloned through the cloneElement method, and the state attribute is injected according to the target state to generate an instance for rendering and display.

[0076] From the above description, we can know that in CSS style, to display a label, you need to set the display attribute of the label to "block", and to hide a label, you need to set the display attribute of the label to "none". When rendering, the display attribute of the CSS style of the component is determined by injecting the state attribute into the switchable component.

[0077] A React component dynamic switching method and terminal of the present invention are suitable for dynamic switching of components of a web front end.

[0078] Please refer to Figure 3-12 , Embodiment 1 of the present invention is:

[0079] A method for dynamically switching a React component comprises the following steps:

[0080] S1. Obtain a component switching request of a page, pass the identification information of the target component to be switched to the switching component, and perform preprocessing;

[0081] The switching component is based on the cloneElement method of React, and all switchable components in the current page are wrapped by the tag of the switching component.

[0082] cloneElement is part of React's top-level API for manipulating elements. It clones an existing component and returns a new component that can be injected with custom attributes.

[0083] In this embodiment, the switching component is named MultiView, and an implementation example of the MultiView component will be specifically introduced below.

[0084] like Figure 3 As shown, the MultiView component encapsulates the best practice code for component switching and provides className, value, viewNames and onChange interfaces to the outside. MultiView clones the target component it wraps through the cloneElement method and injects the multview_actived attribute (the state attribute) into the target component so that the target component can perceive its current switching state.

[0085] like Figure 4 As shown in lines 39-42, using MultiView, you can switch the target component simply and intuitively.

[0086] The following is a detailed introduction to the MultiView component example implemented in this embodiment:

[0087] like Figure 5 As shown in lines 6 to 19 of the code, the MultiView component must provide the following interfaces:

[0088] (1) className: string type. Used to set the CSS class name of the MultiView component externally to customize the style of the MultiView component.

[0089] (2)value: string or number type. Used to specify the array index or name of the component to be displayed. If not set, the first component is displayed by default.

[0090] (3)viewNames: string array type. Used to set a name for the corresponding target component that is easy to remember and use. If viewNames is not set, the value range is the array index corresponding to the wrapped component. If viewNames is set, the name passed to view is the name of the corresponding target component.

[0091] (4) onChange: function type. The onChange method is triggered before the component is switched to notify the external device to perform corresponding processing.

[0092] ①When defining the onChange method trigger, a parameter of type Object must be passed in.

[0093] This parameter must have the following properties:

[0094] 1) nextIndex: number type. Indicates the index of the component to be displayed.

[0095] 2) nextView: string type. Indicates the name of the component to be displayed. If the viewNames interface is not set, view is an empty string.

[0096] 3) index: number type. Indicates the index of the component currently displayed. When the MultiView component is initialized, the index parameter is of undefined type.

[0097] 4)view: string type. Indicates the name of the component currently displayed. If the viewNames interface is not set, view is an empty string. When the MultiView component is initialized, the view parameter is of type undefined.

[0098] In this embodiment, after the MultiView component clones the switchable component, the injected multiview_actived attribute is of boolean type, indicating whether the component is currently in an activated (displayed) state.

[0099] The MultiView component is implemented using React Component instead of hooks, to support pages written in both React Component and React Hook.

[0100] The MultiView component provides the getView method internally:

[0101] like Figure 6 As shown in lines 42-55 of the code, this method accepts the value and viewNames parameters defined in step 1 and returns an Object object. The object has the following properties:

[0102] (1) index: number type. Indicates the array index of the corresponding target component.

[0103] (2)view: string type. Indicates the name of the corresponding target component. The default value of view is an empty string.

[0104] Define the getView method:

[0105] like Figure 7 As shown in lines 21-30 of the code, in the constructor of the MultiView component, you need to first call the getView method to get the array index and name of the next component to be displayed based on the value and viewNames values ​​defined above, and then call the onChange method and pass in the index and view value of the target component to be switched, which is used to notify the outside world for preprocessing when switching for the first time.

[0106] Define the componentWillReceiveProps method:

[0107] In addition, if Figure 8 As shown in lines 32-40 of the code, when the properties of the MultiView component change, the componentWillReceiveProps method will be triggered. This method first calls the getView method to obtain the array index and name of the currently displayed component based on the value and viewNames values ​​before the change, and then calls the getView method to obtain the array index and name of the component to be displayed based on the value and viewNames values ​​after the property change. Then compare the component array index before the property change with the component array index after the property change to determine whether the component to be displayed needs to be changed. If a change is required, call the onChange method and pass in the values ​​of index, view, nextIndex, and nextView to notify the outside to perform preprocessing.

[0108] In the prior art, the preprocessing logic is not distinguished from other business logics during preprocessing. Figure 2As shown in lines 19 to 27 of the code, it is difficult to tell at a glance that this code block is used for component switching preprocessing. Figure 4 As shown in line 39 of the code, we bind the handleChange method to the onChange property of the MultiView component. You can see at a glance that Figure 4 The code from lines 13 to 27 where handleChange is located represents the preprocessing logic of component switching.

[0109] In the prior art, during preprocessing, the naming of parameters related to component switching is rather arbitrary. Different developers have different naming methods, and there is no unified standard. This is not universal, which makes maintenance difficult.

[0110] In this embodiment, MultiView unifies the parameters related to component switching, such as the definition of onChange method parameters, which is easier to read and maintain.

[0111] The above is an introduction to the implementation examples of the relevant definitions of the switching component. The following is an explanation of the use and rendering phase of the switching component in combination with specific usage. Fig. 9 .

[0112] All switchable components in the current page are wrapped by the tag of the switch component. Specifically, all switchable components in the current page are wrapped by the component tag of the switch component in advance, so that when the program is running, the switchable components are passed into the switch component as children attributes, so that the switch component can clone the switchable components based on the cloneElement method and inject the state attribute;

[0113] When the switchable components are transferred into the switching components, the switchable components are formed into an array through an arrangement method.

[0114] In this embodiment, in React, a component class that inherits from React's Component class is defined, and then this class name can be used as an HTML tag. Fig.10 As shown in the code on the left, define a React component class called MultiView. It inherits from the React Component class, such as Fig.10 As shown in the 5th line of code on the left. After definition, Fig.10 As shown in the code on the right, the MultiView component is introduced in line 5, and then the MultiView tag is used in line 13 of the code on the right. Use the MultiView tag to replace the tags corresponding to the target components Component1 and Component2 in lines 14-15 of the code <component1 / >and <component2 / > Wrap it up.

[0115] When the program runs, the React framework parses Fig.10 When the 13th line of code in the middle right figure is executed, the MultiView class instance in the left figure above will be executed, and the instances of the target components Component1 and Component2 in the 14th and 15th lines of code in the right figure above will be passed in as the children property of the MultiView class instance. Fig. 9 The children property in line 58 of the code contains instances of Component1 and Component2.

[0116] Since the children property passed in is not an array and cannot traverse each object, you need to call the React.Children.toArray method to get an array containing Component1 and Component2 instances, so that you can use the array's map method to traverse the target component and use the cloneElement method to clone the target component, such as Fig. 9 As shown in line 64 of the code.

[0117] In React, define a component class that inherits from React's Component class, and then use this class name as an HTML tag. This class name tag is not a native HTML tag. When the program runs, the React framework parses this class name tag and executes the render method corresponding to the class instance. In the render method, a native HTML tag will be generated, such as Fig. 9 As shown in lines 57-73 of the code.

[0118] exist Fig. 9 In the render method, the root node of the rendered DOM object is first defined as a div tag, and the className of the div tag is composed of the default value 'multiview' and the className value.

[0119] Inside the render method, the React framework allows you to dynamically generate native HTML tags programmatically. Fig. 9 As shown in the code from lines 63 to 71 in the figure, a piece of Javascript code is embedded into the div tag on line 62 through a pair of curly brackets. This Javascript code is executed Fig. 9The map method of childArray in line 64 of the example. As we can see from the above analysis, childArray is an array containing Component1 and Component2 instances. The map method of childArray traverses this array and passes each component instance and component array index to the arrow function wrapped by the map method.

[0120] exist Fig. 9 In the arrow function on line 64, two parameters are passed in: child and index. The child parameter is the instance of each component (Component1 or Component2) in the childArray array, and index is the corresponding array index.

[0121] S2. The switching component confirms the state attribute of the target component according to the identification information of the target component.

[0122] In this embodiment, refer to Fig. 9 Inside the arrow function on line 64, the CSS display attribute value (i.e., whether to display) is calculated based on the viewIndex attribute calculated in line 59, such as Fig. 9 As shown in the 65th line of code in the , the state attribute of the target component is determined. Specifically, the viewIndex (the array index of the component to be displayed) is compared with the array index of the child component (each component in the childArray array). If the viewIndex is equal to the index, it means that the child component needs to be displayed.

[0123] S3, cloning the target component, injecting the state attribute and generating an instance, and rendering and displaying the switchable component;

[0124] Step S3 is specifically as follows:

[0125] In the render method, if the target state to be switched by the target component is the activated state, the display attribute of the CSS of the target component is set to block, otherwise it is set to none, and the switchable component is embedded in the div tag returned by the render method;

[0126] The switchable component is cloned through the cloneElement method, and the state attribute is injected according to the target state to generate an instance for rendering and display.

[0127] In this embodiment, after confirming whether the child component needs to be displayed, the display attribute of the child component that needs to be displayed is set to block, otherwise it is set to none. In the CSS style, to display a label, you need to set the display attribute of the label to 'block'. To hide a label, you need to set the display attribute of the label to 'none'. Therefore, the calculated display variable is assigned to the div tag with className 'multiview-item' to dynamically display and hide the specified component and its wrapped subcomponents, such as Fig. 9 As shown in line 67 of the code. Finally, use the cloneElement method to clone the target component array and inject the multiview_actived attribute, as shown in Fig. 9 As shown in line 68 of the code.

[0128] like Fig. 9 As shown in the 68th line of code, the role of cloneElement is actually to dynamically copy an instance of a child component, and embed the corresponding tag into the div tag with className 'mulitiview-item', while injecting the mulitview_actived attribute (state attribute) and the original attributes of the child component. The multiview_actived attribute is calculated based on the comparison between viewIndex and index. Specifically, it compares viewIndex (the array index of the component to be displayed) with the array index of the child component. If viewIndex is equal to index, it means that the child component is in an active (displayed) state, then set the mulitview_actived attribute to true, otherwise set it to false.

[0129] exist Fig. 9 In , when the render method is executed, the class corresponding to the child component will be executed to generate a class instance. Fig.11 As shown, the multiview_actived attribute can be obtained from the attributes of the Component1 component.

[0130] Please refer to Figure 13-15 , Embodiment 2 of the present invention is:

[0131] A method for dynamically switching a React component is different from the first embodiment in that the present embodiment introduces its specific usage scenario.

[0132] 1. Default usage scenario

[0133] like Fig.13 As shown, the default usage is very simple. You only need to wrap the target component in the MultiView component. You can switch the corresponding target component by setting the value attribute of MultiView. The value of the value attribute is the array index of the target component.

[0134] 2. Use array subscripts to switch

[0135] like Fig.14 As shown in the figure, in addition to setting the value, the onChange property of the MultiView component is also set in line 39, and it is bound to the handleChange method in line 13. In this way, before the component is switched, MultiView will automatically trigger the handleChange method and pass in the array index of the current target component and the array index of the next target component to be displayed. In this way, the current component can be cleaned up and the next component can be initialized before switching.

[0136] 3. Use component name to switch

[0137] like Fig.15 As shown in the figure, in line 38, in addition to setting the value and onChange attributes, the viewNames attribute is also set. Each element of the viewNames array corresponds to the name of the target component. By setting the viewNames attribute, you can pass the set component name into the value attribute to switch the corresponding component. This is more readable and easier to maintain.

[0138] Please refer to Fig.16 , Embodiment 3 of the present invention is:

[0139] A React component dynamic switching terminal 1 includes a processor 2, a memory 3, and a computer program stored in the memory 3 and executable on the processor 2. When the processor 2 executes the computer program, the steps of a React component dynamic switching method in the above embodiment 1 or 2 are implemented.

[0140] In summary, the present invention provides a method and terminal for dynamic switching of React components. By defining a switching component based on the cloneElement method of React, the switchable component is cloned and state attribute injection is performed, and the rendering and display of the switchable component is realized, that is, the component is dynamically switched based on the cloneElement method, and the component switching code is encapsulated and the external interface is unified to realize the distinction between business code and component switching code. Each page reuses the same set of switching codes, and each developer uses the same set of switching logic, thereby improving code quality, improving code readability and maintainability, saving developer time, and accelerating development efficiency.

[0141] The above descriptions are merely embodiments of the present invention and are not intended to limit the patent scope of the present invention. Any equivalent transformations made using the contents of the present invention's specification and drawings, or directly or indirectly applied in related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A method for dynamic switching of React components, characterized in that: Includes steps: S1. Obtain a component switching request of a page, pass the identification information of the target component to be switched to the switching component, and perform preprocessing; The switching component is based on the cloneElement method of React, and all switchable components in the current page are wrapped by the tag of the switching component; S2, the switching component confirms the state attribute of the target component according to the identification information of the target component; S3. Clone the target component, inject the state attribute and generate an instance, and render and display the switchable component.

2. According to a method for dynamic switching of React components according to claim 1, it is characterized in that: The switching component is implemented in a React Component manner.

3. A method for dynamically switching React components according to claim 2, characterized in that: All switchable components in the current page are wrapped by the tag of the switching component. Specifically, all switchable components of the current page are wrapped in advance by the component tag of the switching component, so that when the program is running, the switchable components are passed into the switching component as children attributes, so that the switching component can clone the switchable components based on the cloneElement method and inject the state attribute.

4. A method for dynamically switching React components according to claim 3, characterized in that: When the switchable components are transferred into the switching components, the switchable components are formed into an array through an arrangement method.

5. According to claim 1, a method for dynamically switching a React component is characterized in that: Step S3 is specifically as follows: In the render method, if the target state to be switched by the target component is the activated state, the display attribute of the CSS of the target component is set to block, otherwise it is set to none, and the switchable component is embedded in the div tag returned by the render method; The switchable component is cloned through the cloneElement method, and the state attribute is injected according to the target state to generate an instance for rendering and display.

6. A React component dynamically switches terminals, comprising a processor, a memory, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the following steps are implemented: S1. Obtain a component switching request of a page, pass the identification information of the target component to be switched to the switching component, and perform preprocessing; The switching component is based on the cloneElement method of React, and all switchable components in the current page are wrapped by the tag of the switching component; S2, the switching component confirms the state attribute of the target component according to the identification information of the target component; S3. Clone the target component, inject the state attribute and generate an instance, and render and display the switchable component.

7. A method for dynamically switching terminals of a React component according to claim 6, characterized in that: The switching component is implemented in a React Component manner.

8. A method for dynamically switching terminals of a React component according to claim 7, characterized in that: All switchable components in the current page are wrapped by the tag of the switching component. Specifically, all switchable components of the current page are wrapped in advance by the component tag of the switching component, so that when the program is running, the switchable components are passed into the switching component as children attributes, so that the switching component can clone the switchable components based on the cloneElement method and inject the state attribute.

9. A method for dynamically switching terminals of a React component according to claim 8, characterized in that: When the switchable components are transferred into the switching components, the switchable components are formed into an array through an arrangement method.

10. A method for dynamically switching terminals of a React component according to claim 6, characterized in that: Step S3 is specifically as follows: In the render method, if the target state to be switched by the target component is the activated state, the display attribute of the CSS of the target component is set to block, otherwise it is set to none, and the switchable component is embedded in the div tag returned by the render method; The switchable component is cloned through the cloneElement method, and the state attribute is injected according to the target state to generate an instance for rendering and display.

Images