react 嵌套渲染_在React中递归渲染嵌套数据

小编典典

您只需要递归调用Menu组件，其子组件即可显示并作为数据道具传递。

let data = [

{

title: "Top level 1",

slug: "top-level-1",

children: [

{

title: "Sub level 1",

slug: "sub-level-1",

children: [

{

title: "Sub Sub Level 1",

slug: "sub-sub-level-1",

children: [

{

title: "Sub Sub Level 2",

slug: "sub-sub-level-2"

}

]

}

]

},

{

title: "Sub level 2",

slug: "sub-level-2"

}

]

},

{

title: "Top level 2",

slug: "top-level 2"

}

];

const Menu = ({data}) => {

return (

{data.map(m => {

return (

{m.title}

{m.children &&

});

})}

);

}

const App = () => (

Start editing to see some magic happen {'\u2728'}

);

2020-07-22