如何在 JSX / React [material-ui] 中递归?

Question

我尝试了很多方法，很多文章，每次我尝试一些例子时，我都会失败。 我得到的最接近的是显示最顶层的节点(动物(，仅此而已。

我希望通过"孩子"递归，如果它存在的话......因为最后一项不会有孩子...并使用材料 UI 列表/复选框创建一种嵌套列表框

什么......流量..我做错了吗？

就像我说的..我可以得到第一项(动物(拉不出问题...我只是无法进行递归过程。=(

标题.js调用侧边栏.js(我想要递归的地方(

标题.js：

import React from 'react';
import Sidebar from './Sidebar.js';
const returnedjson = [
{
"className":"taxonomy"
,"description":"animals.. like meat, you know."
,"name": "Animal"
,"keyname": "ANIMAL"
,"key":1
,"children:":[
{
"className":"taxonomy"
,"description":"Feathers and fly."
,"name": "Bird"
,"keyname": "BIRD"
,"key":1
,"children":[
{
"className":"taxonomy"
,"description":"bawk bak"
,"name": "Chicken"
,"keyname": "CHICKEN"
,"key":1
,"children":[
{
"className":"taxonomy"
,"description":"Meat"
,"name": "Meat"
,"keyname": "MEAT"
,"key":2
,"children":[
{
"className":"taxonomy"
,"description":"Breast"
,"name": "Breast"
,"keyname": "BREAST"
,"key":1
}
,   {
"className":"taxonomy"
,"description":"wing"
,"name": "Wing"
,"keyname": "WING"
,"key":2
},  {
"className":"taxonomy"
,"description":"Drumstick"
,"name": "Drumstick"
,"keyname": "DRUMSTICK"
,"key":3
}
]
}
,{
"className":"taxonomy"
,"description":"Harvest"
,"name": "Harvest"
,"keyname": "HARVEST"
,"key":1
,"children":[
{
"className":"taxonomy"
,"description":"Egg"
,"name": "Egg"
,"keyname": "EGG"
,"key":1
}
,   {
"className":"taxonomy"
,"description":"Egg"
,"name": "Egg White"
,"keyname": "EGG WHITE"
,"key":2
},  {
"className":"taxonomy"
,"description":"Egg"
,"name": "Egg Yolk"
,"keyname": "EGG YOLK"
,"key":3
}
]
}
]
}
]
}
,   {
"className":"taxonomy"
,"description":"Like a cow, deer, elk."
,"name": "Hooven"
,"keyname": "HOOVEN"
,"key":2
,"children":[
{
"className":"taxonomy"
,"description":"Moo"
,"name": "Cow"
,"keyname": "COW"
,"key":1
,"children":[
{
"className":"taxonomy"
,"description":"Meat"
,"name": "Meat"
,"keyname": "MEAT"
,"key":2
,"children":[
{
"className":"taxonomy"
,"description":"Flank"
,"name": "Flank"
,"keyname": "FLANK"
,"key":1
}
,   {
"className":"taxonomy"
,"description":"rump"
,"name": "Rump"
,"keyname": "RUMP"
,"key":2
},  {
"className":"taxonomy"
,"description":"Shank"
,"name": "Shank"
,"keyname": "SHANK"
,"key":3
}
]
},{
"className":"taxonomy"
,"description":"Harvested"
,"name": "Harvest"
,"keyname": "HARVEST"
,"key":1
,"children":[
{
"className":"taxonomy"
,"description":"Milk"
,"name": "Milk"
,"keyname": "MILK"
,"key":1
}
,   {
"className":"taxonomy"
,"description":"half and half"
,"name": "Half and Half"
,"keyname": "HALF AND HALF"
,"key":2
},  {
"className":"taxonomy"
,"description":"butter"
,"name": "Butter"
,"keyname": "BUTTER"
,"key":3
}
]
}
]
}]
}
]
}
]
class Header extends React.Component{
render(){
let taxonomyarray=returnedjson
return(
<div>
<Sidebar taxonomyarray={taxonomyarray} />
</div>
);
}


}
export default Header;

侧边栏.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Checkbox from '@material-ui/core/Checkbox';

function SidebarList({ taxonomyarray }) {
return (
<div className="list">
<List disablePadding dense>
{taxonomyarray.map(
({ 
className
, name
, keyname
, description
, key
, children
, value
}) => 
(
<ListItem className ={className} key={key} button>
<ListItemIcon>
<Checkbox
// checked={checked.indexOf(value) !==-1}
tabIndex={-1}
disableRipple
/>
</ListItemIcon>
<ListItemText
primary={name}
secondary={description}
key ={key}
/>
</ListItem>
))}
</List>
</div>
)
}
function Sidebar({ taxonomyarray }){
console.log({taxonomyarray});
return(
<SidebarList taxonomyarray={taxonomyarray}/>
)
}

export default Sidebar

Answer 1

您可以通过使用递归函数映射 JSON 来执行此操作。不确定您要为每个项目渲染什么，根据这一点，它可能会变得更加复杂，但我在这里做了一个基本示例。

请注意，我认为顶级项目中还有一个拼写错误。密钥是"children:"而不是children。