我正在嘗試使用 React 遞回地渲染樹項，但我不能完全得到我想要的結果。我知道問題在于呼叫treeRender(children)，因為它會更改檔案夾第一個實體的資料結構。我想知道這是如何正確完成的。
我的嘗試：
const treeRender = (data: any) => {
for (const [name, value] of Object.entries(data)) {
if (typeof value == "object") {
const children = value
return (
<StyledTreeItem
key={name}
nodeId={name}
labelText={name}
labelIcon={FolderIcon}
>
{treeRender(children)}
</StyledTreeItem>
);
} else {
return (
<StyledTreeItem
key={name}
nodeId={name}
labelText={name}
labelIcon={InsertDriveFileIcon}
/>
);
}
}
};
return (
<TreeView
aria-label={"filePicker"}
defaultExpanded={["3"]}
defaultCollapseIcon={<ArrowDropDownIcon />}
defaultExpandIcon={<ArrowRightIcon />}
defaultEndIcon={<div style={{ width: 24 }} />}
sx={{ height: 264, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
>
{treeRender(fileTree)}
</TreeView>
);
輸出僅呈現第一個檔案夾和檔案級別，而不是呈現所有檔案夾：
{
"__global": {
"globalFile.csv": "download link"
},
}
所需的渲染輸出（這也是輸入資料）：
{
"__global": {
"globalFile.csv": "download link"
},
"group1": {
"folder": {
"folderFile.csv": "download link"
},
"group1File.csv": "download link"
}
}
uj5u.com熱心網友回復：
將return在第一次迭代時退出回圈并且不會轉到下一個元素，您應該將元素存盤在變數中并在回圈完成后回傳它，請參閱下面的代碼片段以獲取代碼的簡化版本：（替換div與StyledTreeItem）
const input = {
"__global": {
"globalFile.csv": "download link"
},
"group1": {
"folder": {
"folderFile.csv": "download link"
},
"group1File.csv": "download link"
}
}
const treeRender = (data) => {
const result = [];
for (const [name, value] of Object.entries(data)) {
if (typeof value == "object") {
const children = value
result.push(
<div key={name}>{treeRender(children)}</div>
);
} else {
result.push(
<div key={name}>{name}</div>
);
}
}
return result;
};
ReactDOM.render(<div>{treeRender(input)}</div>, document.querySelector("#root"))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/526102.html