React-based file path selection method and device and storage medium

Abstract

The invention relates to a React-based file path selection method and device and a storage medium, which are applied to the technical field of software development, and the method comprises the following steps: by introducing a React framework, creating a file path selector component on the basis of the React framework, creating a FileTreeNode component, and displaying a selectable folder list in the file path selector component through the FileTreeNode component; a load interface is created, parameters needed by the FileTreeNode component are transmitted into the ProjectTree component through the load interface, and a corresponding selectable folder list is obtained according to a current path; according to the file path selector provided by the invention, the code writing amount can be greatly reduced, the development efficiency is improved, meanwhile, user-friendly interaction experience is also provided, and a user can intuitively select a file path and conveniently and quickly perform file operation by traversing and displaying a file system; the problem that in the prior art, when a React framework is used for development, a component specially used for selecting the file path is not provided is solved.

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and in particular to a React-based file path selection method, device and storage medium. Background Art

[0002] In the field of software development, when using the React framework for development, it is usually necessary to allow users to select the file path. There are already some libraries, such as react-dropzone, react-fine-uploader, etc., which provide some file upload solutions, but do not provide components specifically for selecting file paths. Summary of the invention

[0003] In view of this, the purpose of the present invention is to provide a file path selection method, device and storage medium based on React, so as to solve the problem in the prior art that there is no component specifically used for selecting the file path when developing using the React framework.

[0004] According to a first aspect of an embodiment of the present invention, a method for selecting a file path based on React is provided, the method comprising:

[0005] Introduce the React framework, and create a file path selector component based on the React framework;

[0006] Create a FileTreeNode selectable folder component, and display a selectable folder list in the file path selector component through the FileTreeNode selectable folder component;

[0007] A load interface is created, and the parameters required by the FileTreeNode selectable folder component are passed into the ProjectTree component through the load interface, so as to obtain the corresponding selectable folder list according to the current path.

[0008] Preferably,

[0009] Creating a file path selector component based on the React framework includes:

[0010] Create a ProjectTree component based on the React framework;

[0011] The ProjectTree component includes: an input box for displaying the selected path and a drop-down box as a container for selecting the folder component FileTreeNode;

[0012] The parameters accepted by the ProjectTree component include: selectedPath parameter, onChange parameter and load parameter;

[0013] The selectedPath parameter indicates the selected file path, the onChange parameter indicates the confirmation process after the file path is selected, and the load parameter indicates the function of loading the selectable folder list.

[0014] Preferably,

[0015] The parameters accepted by the ProjectTree component include: selectedPath parameter, onChange parameter and load parameter;

[0016] The selectedPath parameter indicates the selected file path, the onChange parameter indicates the confirmation process after the file path is selected, and the load parameter indicates the function of loading the selectable folder list.

[0017] Preferably,

[0018] The displaying of the selectable folder list in the file path selector component through the FileTreeNode selectable folder component includes:

[0019] The parameters accepted by the FileTreeNode selectable folder component include: selectedPath parameter, load parameter, node parameter, onChange parameter and deep parameter;

[0020] The selectedPath parameter is used to determine whether the current file path is selected and display the corresponding selected icon and style;

[0021] The load parameter is used to load the selectable folder list function under the current folder path, and the selectable folder list function is taken from the load parameter sent by the ProjectTree component;

[0022] The node parameter represents the information of the current folder path, and the information of the current folder path is an element in the selectable folder list returned by the load parameter of the ProjectTree component;

[0023] The onChange parameter is used to set the currently selected folder path when clicking the FileTreeNode selectable folder component;

[0024] The deep parameter is used to indicate the level of the current folder path and display the corresponding indentation style.

[0025] Preferably,

[0026] The elements in the selectable folder list returned by the load parameter of the ProjectTree component include:

[0027] Folder name fileName, folder path filePath.

[0028] Preferably, it also includes:

[0029] Expand the FileTreeNode selectable folder component, maintain a component state of whether it is expanded inside the FileTreeNode selectable folder component, and expand or collapse it when the user clicks;

[0030] Determine whether the file path is selected according to the selectedPath parameter passed in by the ProjectTree component.

[0031] According to a second aspect of an embodiment of the present invention, a React-based file path selection device is provided, the device comprising:

[0032] Selector component creation module: used to introduce the React framework and create a file path selector component based on the React framework;

[0033] Display module: used to create a FileTreeNode selectable folder component, and display the selectable folder list in the file path selector component through the FileTreeNode selectable folder component;

[0034] Path selection module: used to create a load interface, through which the parameters required by the FileTreeNode selectable folder component are passed into the ProjectTree component, so as to obtain the corresponding selectable folder list according to the current path.

[0035] According to a third aspect of an embodiment of the present invention, there is provided a storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a main controller, each step in the above method is implemented.

[0036] The technical solution provided by the embodiments of the present invention may have the following beneficial effects:

[0037] This application introduces the React framework, creates a file path selector component based on the React framework, creates a FileTreeNode component, and displays the selectable folder list in the file path selector component through the FileTreeNode component; creates a load interface, and passes the parameters required by the FileTreeNode component into the ProjectTree component through the load interface, and obtains the corresponding selectable folder list according to the current path; the file path selector provided by this application can greatly reduce the amount of code writing and improve development efficiency, and also provides a user-friendly interactive experience. By traversing and displaying the file system, users can intuitively select file paths and perform file operations conveniently and quickly; it makes up for the problem in the prior art that there is no component specifically used to select file paths when developing using the React framework.

[0038] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.

[0040] Figure 1 is a flowchart of a method for selecting a file path based on React according to an exemplary embodiment;

[0041] Figure 2 is a system schematic diagram of a file path selection device based on React according to another exemplary embodiment;

[0042] In the attached figure: 1-selector component creation module, 2-display module, 3-path selection module. DETAILED DESCRIPTION

[0043] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. Instead, they are merely examples of devices and methods consistent with some aspects of the present invention as detailed in the appended claims.

[0044] Embodiment 1

[0045] Figure 1 is a flowchart of a method for selecting a file path based on React according to an exemplary embodiment. Figure 1As shown, the method includes:

[0046] S1, introducing the React framework, and creating a file path selector component based on the React framework;

[0047] S2, creating a FileTreeNode selectable folder component, and displaying a selectable folder list in the file path selector component through the FileTreeNode selectable folder component;

[0048] S3, creating a load interface, and passing the parameters required by the FileTreeNode selectable folder component into the ProjectTree component through the load interface, so as to obtain the corresponding selectable folder list according to the current path;

[0049] It can be understood that the specific process of this embodiment is as follows:

[0050] Introduce the React framework and create a React component ProjectTree based on the React framework. The ProjectTree component consists of two parts: an input box that displays the selected path and a drop-down box that serves as a container for the selectable folder component FileTreeNode; the ProjectTree component accepts the following parameters:

[0051] selectedPath: the selected file path;

[0052] onChange: confirmation processing after the path is selected;

[0053] load: function to load selectable folder list;

[0054] It is worth mentioning that the React framework is an open source JavaScript library, a project scaffold officially launched by Facebook, mainly used to build user interfaces. Especially for medium and large project development, it is known as the "first front-end framework" for its efficiency, flexibility and strong componentization capabilities. The characteristics of the React framework are declarative programming and componentization, so the user interface can be built and maintained more efficiently.

[0055] The functions of the ProjectTree component include but are not limited to displaying the structure of the elements that make up the project, supporting dragging and sorting, customizing icons, and displaying the project directory structure; in addition, it also supports use in the Vue3+TypeScript environment, and provides a rich API interface, including properties, events, methods and slots, so that developers can flexibly control and customize the performance and interaction of the project tree. The ProjectTree component is used to provide a clear and interactive project structure view to help users better understand and manage project elements at work. Therefore, the ProjectTree component can display the structure of the elements that make up the project, such as: The ProjectTree component can clearly display the various components of the project, including folders, files and other project elements, and present them in a tree structure to facilitate user understanding and navigation; support dragging and sorting functions, users can freely adjust the order and position of project elements to meet different organizational and display needs; provide custom icon functions, allowing users to select or design icons according to project needs to enhance the visualization and recognition of the project; can generate and display the directory structure of the project, including the hierarchical relationship between files and folders, to help users quickly browse and understand the overall structure of the project.

[0056] Implements the selectable folder component FileTreeNode; this component accepts the following parameters:

[0057] selectedPath: used to determine whether the current file path is selected and display the corresponding selected icon and style;

[0058] load: Loads the selectable folder list function under the current folder path. The value is taken from the parameter load passed in by the ProjectTree component;

[0059] node: the information of the current folder path, taken from an element in the selectable folder list returned by the ProjectTree component load function, including the folder name fileName and the folder path filePathonChange: set the currently selected folder path when clicking the component;

[0060] deep: used to indicate the level of the current folder path and display the corresponding indentation style;

[0061] Considering that there are other selectable folder components under the selectable folder component, when the current selectable folder component is clicked, the load function is called to load the selectable folder list and render it into a selectable folder component. Therefore, there will be several FileTreeNodes under the FileTreeNode.

[0062] The functions of the FileTreeNode component mainly include representing folders in the file system and supporting the expansion and collapse operations of folders. The FileTreeNode component displays the file architecture in a tree structure, allowing users to browse and manage files and folders intuitively. The specific functions include: the FileTreeNode component is used to represent folders in the file system, including the folder name, path and other information; users can expand or collapse folders by clicking on the FileTreeNode to view or hide the files and subfolders it contains; users can select a FileTreeNode for further operations, such as opening a folder, renaming, deleting, etc.; the FileTreeNode component can also handle various events, such as click events, double-click events, etc., so as to perform corresponding operations when the user interacts with the file system.

[0063] The server implements the load interface and obtains the corresponding selectable folder list according to the current path; passes parameters such as load and onChange to the ProjectTree component, and passes the parameters required by the FileTreeNode component inside the ProjectTree component;

[0064] Expand the FileTreeNode component to provide user interaction functions; enable users to expand and collapse folders - maintain a component state of "whether expanded" inside the FileTreeNode component, expand / collapse when the user clicks, and indicate the currently selected path - determine whether it is selected based on the selectedPath passed in by the ProjectTree component.

[0065] Embodiment 2

[0066] Figure 2 is a system schematic diagram of a React-based file path selection device according to another exemplary embodiment, the device comprising:

[0067] Selector component creation module 1: used to introduce the React framework and create a file path selector component based on the React framework;

[0068] Display module 2: used to create a FileTreeNode selectable folder component, and display the selectable folder list in the file path selector component through the FileTreeNode selectable folder component;

[0069] Path selection module 3: used to create a load interface, through which the parameters required by the FileTreeNode selectable folder component are passed into the ProjectTree component, so as to obtain the corresponding selectable folder list according to the current path.

[0070] Embodiment three:

[0071] This embodiment provides a storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a main controller, each step in the above method is implemented;

[0072] It is understandable that the storage medium mentioned above can be a read-only memory, a magnetic disk or an optical disk, etc.

[0073] It can be understood that the same or similar parts of the above embodiments can be referenced to each other, and the contents not described in detail in some embodiments can refer to the same or similar contents in other embodiments.

[0074] It should be noted that, in the description of the present invention, the terms "first", "second", etc. are only used for descriptive purposes and cannot be understood as indicating or implying relative importance. In addition, in the description of the present invention, unless otherwise specified, the meaning of "plurality" refers to at least two.

[0075] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, segment or portion of code that includes one or more executable instructions for implementing the steps of a specific logical function or process, and the scope of the preferred embodiments of the present invention includes alternative implementations in which functions may not be performed in the order shown or discussed, including performing functions in a substantially simultaneous manner or in the reverse order depending on the functions involved, which should be understood by those skilled in the art to which the embodiments of the present invention belong.

[0076] It should be understood that the various parts of the present invention can be implemented by hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, a plurality of steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0077] A person skilled in the art may understand that all or part of the steps in the method for implementing the above-mentioned embodiment may be completed by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, which, when executed, includes one or a combination of the steps of the method embodiment.

[0078] In addition, each functional unit in each embodiment of the present invention may be integrated into a processing module, or each unit may exist physically separately, or two or more units may be integrated into one module. The above-mentioned integrated module may be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it may also be stored in a computer-readable storage medium.

[0079] The storage medium mentioned above can be a read-only memory, a magnetic disk or an optical disk, etc.

[0080] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "examples", "specific examples", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner.

[0081] Although the embodiments of the present invention have been shown and described above, it is to be understood that the above embodiments are exemplary and are not to be construed as limitations of the present invention. A person skilled in the art may change, modify, replace and vary the above embodiments within the scope of the present invention.

Claims

1. A file path selection method based on React, characterized in that: The method comprises: Introduce the React framework, and create a file path selector component based on the React framework; Create a FileTreeNode selectable folder component, and display a selectable folder list in the file path selector component through the FileTreeNode selectable folder component; A load interface is created, and the parameters required by the FileTreeNode selectable folder component are passed into the ProjectTree component through the load interface, so as to obtain the corresponding selectable folder list according to the current path.

2. The method according to claim 1, characterized in that Creating a file path selector component based on the React framework includes: Create a ProjectTree component based on the React framework; The ProjectTree component includes: an input box for displaying the selected path and a drop-down box as a container for selecting the folder component FileTreeNode; The parameters accepted by the ProjectTree component include: selectedPath parameter, onChange parameter and load parameter; The selectedPath parameter indicates the selected file path, the onChange parameter indicates the confirmation process after the file path is selected, and the load parameter indicates the function of loading the selectable folder list.

3. The method according to claim 2, characterized in that The parameters accepted by the ProjectTree component include: selectedPath parameter, onChange parameter and load parameter; The selectedPath parameter indicates the selected file path, the onChange parameter indicates the confirmation process after the file path is selected, and the load parameter indicates the function of loading the selectable folder list.

4. The method according to claim 3, characterized in that: The displaying of the selectable folder list in the file path selector component through the FileTreeNode selectable folder component includes: The parameters accepted by the FileTreeNode selectable folder component include: selectedPath parameter, load parameter, node parameter, onChange parameter and deep parameter; The selectedPath parameter is used to determine whether the current file path is selected and display the corresponding selected icon and style; The load parameter is used to load the selectable folder list function under the current folder path, and the selectable folder list function is taken from the load parameter sent by the ProjectTree component; The node parameter represents the information of the current folder path, and the information of the current folder path is an element in the selectable folder list returned by the load parameter of the ProjectTree component; The onChange parameter is used to set the currently selected folder path when clicking the FileTreeNode selectable folder component; The deep parameter is used to indicate the level of the current folder path and display the corresponding indentation style.

5. The method according to claim 4, characterized in that The elements in the selectable folder list returned by the load parameter of the ProjectTree component include: Folder name fileName, folder path filePath.

6. The method according to claim 5, characterized in that Also includes: Expand the FileTreeNode selectable folder component, maintain a component state of whether it is expanded inside the FileTreeNode selectable folder component, and expand or collapse it when the user clicks; Determine whether the file path is selected according to the selectedPath parameter passed in by the ProjectTree component.

7. A file path selection device based on React, characterized in that: The device comprises: Selector component creation module: used to introduce the React framework and create a file path selector component based on the React framework; Display module: used to create a FileTreeNode selectable folder component, and display the selectable folder list in the file path selector component through the FileTreeNode selectable folder component; Path selection module: used to create a load interface, through which the parameters required by the FileTreeNode selectable folder component are passed into the ProjectTree component, so as to obtain the corresponding selectable folder list according to the current path.

8. A storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by the main controller, each step in the React-based file path selection method as described in any one of claims 1 to 6 is implemented.

Images