ReactJS呈现动态嵌套的数据数组

Question

如何在ReactJS中呈现动态嵌套数据?这个数组示例包含嵌套的子元素，每个元素都有相同的结构。有一种方法递归地呈现这些数据?

function App () {
const [data, setData] = useState([
{
id: '1',
name: 'demo1',
programParent: '',
childs: [
{
id: '2',
name: 'dem2',
programParent: '1',
childs: [
{
id: '4',
name: 'demo4',
programParent: '2',
childs: [
{
id: '5',
name: 'demo5',
programParent: '4'
}
]
}
]
},
{
id: '3',
name: 'demo3',
programParent: '1'
}
]
},
{
id: '6',
name: 'demo6',
programParent: ''
}
])
return (
<>
<div>
{
data.length &&
data.map(item => (
<div key={item.id}>
<h3>{item.name}</h3>
{
item.childs?.length && (
item.childs.map(child => (
<div key={child.id}>
<h4>-{child.name}</h4>
{
child.childs?.length && (
child.childs.map(childChild => (
<div key={childChild.id}>
<h5>--{childChild.name}</h5>
</div>
))
)
}
</div>
))
)
}
</div>
))
}
</div>
</>
)
}
export default App

Answer 1

您需要递归地呈现它们。这里有一些东西给你一个想法，你可以进一步自定义渲染。

import React from 'react';
import './style.css';
let Tree = ({ data }) => {
return (
<div>
{data.map((x) => {
return (
<div key={x.id}>
{x.name}
{!!x.childs?.length && (
<div style={{ marginLeft: 10 }}>
<Tree data={x.childs} />
</div>
)}
</div>
);
})}
</div>
);
};

export default function App() {
const [data, setData] = React.useState([
{
id: '1',
name: 'demo1',
programParent: '',
childs: [
{
id: '2',
name: 'dem2',
programParent: '1',
childs: [
{
id: '4',
name: 'demo4',
programParent: '2',
childs: [
{
id: '5',
name: 'demo5',
programParent: '4',
},
],
},
],
},
{
id: '3',
name: 'demo3',
programParent: '1',
},
],
},
{
id: '6',
name: 'demo6',
programParent: '',
},
]);
return (
<div>
<Tree data={data} />
</div>
);
}

Answer 2

是，使用递归组件:

const data = [
{
id: "1",
name: "demo1",
programParent: "",
childs: [
{
id: "2",
name: "dem2",
programParent: "1",
childs: [...]
},
...
]
},
...
];
export default function App() {
return <Node childs={data} name="root" />;
}
function Node({ childs, name }) {
return (
<div className="node">
<h2>{name}</h2>
{childs && childs.map((x) => <Node key={x.id} {...x} />)}
</div>
);
}

Answer 3

我将为这个演示使用自定义组件

const Component = ({ item, level }) => {
const Heading = level <= 6 ? `h${level}` : "h6";
return (
<div>
<Heading>{item.name}</Heading>
{item.childs?.map((child) => (
<Component item={child} level={level + 1} />
))}
</div>
);
};

使用

{data.length && data.map((item) => <Component item={item} level={1} />)}