如何隐藏/显示子树反应

Question

嗨，我想创建一个树的列表，我有…我可以用下面的代码在屏幕上以正确的顺序显示它:

let TreeView = (props) => {
let { data } = props;
return (
<div className="treeview-root">
<header>
<input type="text" placeholder="Enter project name" />
<button className="btn-assets">Assets List</button>
</header>
<article>
<ul>
<Tree data={data} />
</ul>
</article>
</div>
);
};

const Tree = ({ data }) => {
return (
<>
<li>{data.name}</li>
{data.children &&
data.children.map((child) => {
return <Tree key={child.name} data={child} />;
})}
</>
);
};
export default TreeView;

但是现在我被困在了通过点击来隐藏孩子的能力，或者通过点击正确的顺序来呈现他们…我很乐意帮忙

这是数据:

{
"type": "directory",
"name": "Kokoapps exercise project",
"children": [
{
"type": "directory",
"name": "Group A",
"children": [
{
"type": "directory",
"name": "Group A-1",
"children": [
{
"type": "directory",
"name": "Group A-1-1",
"children": [
{ "type": "file", "name": "file1.txt" },
{ "type": "file", "name": "file2.txt" },
{ "type": "file", "name": "file3.txt" }
]
},
{
"type": "file",
"name": "file1.txt"
},
{
"type": "file",
"name": "file2.txt"
}
]
},
{
"type": "directory",
"name": "Group A-2",
"children": [
{
"type": "file",
"name": "file3.txt"
},
{
"type": "file",
"name": "file4.txt"
}
]
},
{
"type": "file",
"name": "file1.txt"
},
{
"type": "file",
"name": "file2.txt"
}
]
},
{
"type": "directory",
"name": "Group B",
"children": [
{
"type": "directory",
"name": "Group B-1",
"children": [
{
"type": "file",
"name": "file1.txt"
},
{
"type": "file",
"name": "file2.txt"
}
]
},
{
"type": "directory",
"name": "Group B-2",
"children": [
{
"type": "file",
"name": "file3.txt"
},
{
"type": "file",
"name": "file4.txt"
}
]
},
{
"type": "file",
"name": "file1.txt"
},
{
"type": "file",
"name": "file2.txt"
},
{
"type": "file",
"name": "file3.txt"
},
{
"type": "file",
"name": "file4.txt"
}
]
}
]
}

Answer 1

您需要将onClick处理程序添加到tree元素，并跟踪子元素是否可见。您的onClick处理程序可以切换子程序的可见性。像这样的代码应该可以工作:

https://codesandbox.io/s/pedantic-chaplygin-9fdb3b?file=/src/App.js: 63 - 68