Recursive Components
Introduction
According to the theory of computation, a recursive function is a function that solves a problem by dividing it into smaller cases and calling itself to solve those smaller cases. Each recursive call reduces the original problem into smaller subproblems, and the recursion continues until it reaches a base case, which is a condition that allows the function to stop calling itself.
The basic structure of a recursive function includes the definition of the base case and the recursive call. The base case is crucial to prevent infinite recursive calls and ensure that the recursion eventually reaches a termination point.
React
Within the React ecosystem, it is possible to develop recursive structures when declaring components, as long as one strictly adheres to the guidelines established by a base condition. This condition is essential to ensure that the component can complete its rendering cycle efficiently and without hindrances.
File Tree
In this flow, the rendering logic is adjusted based on the type of node encountered. If the node is an array, the TreeList component is called for each item in the array. If the node is an object, the component is called for each key-value pair, thus enabling the representation of directories and subdirectories. For each file node (leaf), the component renders the corresponding information.
export const TreeList = ({ tree, path }: TreeProps) => { const [display, setDisplay] = useState(true); if (Array.isArray(tree)) { return ( <ul className="pl-[1.5rem]"> {tree.map((value, index) => ( <li key={index} className="relative"> <TreeList onFileClick={onFileClick} tree={value} path={path || ''} /> </li> ))} </ul> ); } if (typeof tree === 'object') { return ( <ul> {Object.entries(tree).map(([key, value]) => ( <li key={key}> <button onClick={() => setDisplay((d) => !d)}> {key} {display ? '-' : '+'} </button> <div className={`${display ? 'block' : 'hidden'}`}> <TreeList onFileClick={onFileClick} tree={value} path={`${path}/${key}`} /> </div> </li> ))} </ul> ); } return ( <span data-path={`${path}/${tree}`} onClick={() => onFileClickHandler(`${path}/${tree}`)} className="relative font-mono flex items-center gap-2 cursor-pointer" > {tree} </span> );};Experiment
[{ "Charts": [ { "nginx-dev":[ { "templates":[ "deployment.yaml", "service.yaml" ] }, "values.yaml" ] }, { "nginx-prod":[ { "templates":[ "deployment.yaml", "service.yaml" ] }, "values.yaml" ] }, ],}, "Chart.yaml", "values.yaml",]-
deployment.yaml - service.yaml
-
- values.yaml
- deployment.yaml
- service.yaml
-
- values.yaml
- Chart.yaml
- values.yaml
