从 'react' 导入 React, { useState }
导出默认函数Folder({ datas }) { const [toggleFolder, setToggleFolder] = useState(false);
返回( <>
<div
onClick={() => setToggleFolder(prev => !prev)}
className='cursor-pointer'>📁 {datas.folder}</div>
<div
key={datas.id}
style={{ display: toggleFolder ? "block" : "none" }}
className='pl-[20px]'
>
{
datas.children && datas.children.length > 0 ?
datas.children.map((key, index) => {
return <Folder datas={key} />
})
: <p className='opacity-70'>empty</p>
}
</div>
</>
) }
import React, { useState } from 'react';
export default function Folder({ datas }) {
const [toggleFolder, setToggleFolder] = useState(false);
return (
<>
<div
onClick={() => setToggleFolder(prev => !prev)}
className='cursor-pointer'
>
📁 {datas.folder}
</div>
<div
key={datas.id}
style={{ display: toggleFolder ? "block" : "none" }}
className='pl-[20px]'
>
{datas.children && datas.children.length > 0 ? (
datas.children.map(child => (
<Folder key={child.id} datas={child} />
))
) : (
<p className='opacity-70'>empty</p>
)}
</div>
</>
);
}
即使它仍然存在,也尝试添加索引
(
datas.children.map(child,index) => (
<Folder key={index} datas={child} />
))