时间戳

首页 > 解决方案 > React recursion with map 不适用于嵌套元素

javascript - React recursion with map 不适用于嵌套元素

问题描述

我是新手，我试图创建一个嵌套的文件夹树和递归文件。我创建了 03 个组件树、文件夹和文件。在树中，我放置了递归逻辑，如果我找到一个文件夹，我会映射所有元素，如果我找到一个文件，我会创建文件夹并调用函数，我会直接显示它（参见下面的代码）。

该函数仅创建 0 级元素。我想知道为什么一旦我再次回忆起<Tree tree ={item.items}/>文件夹内的功能 Tree 它确实起作用。有什么提示吗？

export function Tree ({tree})  {
const items = tree
  return (
   <>
    {items.map((item, idx) => { 
            if (item.items) {
                /**
                 * is Folder
                 */
                return (
                    <Folder key={idx} folder_name={item.name} num_folders={items.length} >
                        {<Tree tree ={item.items}/> /**this does not work**/}
                    </Folder>
                )
            }
            else {
                return (
                <File key={idx} file_name= {item.name} file_icon={item.icon} file_size ={item.size} />
                ) 
            }
        })}
   </>
  );
}

标签： javascriptreactjsrecursion

解决方案

你应该使用 Reactchildren属性。

children 是 React 组件的一个特殊属性，它包含组件中定义的任何子元素，例如上面示例中的 div。{this.props.children} 在渲染结果中包含这些孩子。

因此，您在其中插入的<Folder> </Folder>内容将通过children属性呈现。只需更新您的文件夹组件以呈现这些子项，如下所示：

export function Folder({ other_props, children}){
    ...
    return (
        <div>
            ... 
            {
                children 
            }    
        </div>
    );
}

children在此堆栈问题中阅读有关属性的更多信息什么是 {this.props.children} 以及何时应该使用它？

推荐阅读