reactl列表 react中遞迴生成列表

2021-10-18 16:10:26 字數 1161 閱讀 1347

import react, from 'react';

import from 'antd';

import from 'react-router-dom';

const menulist = [

title: '首頁', // 選單標題名稱

key: '/home', // 對應的 path

icon: 'home', // 圖示名稱

title: '商品',

key: '/products',

children: [ // 子選單列表

title: '品類管理',

key: '/category',

icon: 'bars'

title: '商品管理',

key: '/product',

icon: 'tool'

title: '使用者管理',

key: '/user',

icon: 'user'

title: '角色管理',

key: '/role',

icon: 'safety',

title: '圖形圖表',

key: '/charts',

icon: 'area-chart',

children: [

title: '柱形圖',

key: '/charts/bar',

icon: 'bar-chart'

title: '折線圖',

key: '/charts/line',

icon: 'line-chart'

title: '餅圖',

key: '/charts/pie',

icon: 'pie-chart'

const = menu;

class leftmenu extends component

} else

title=

this.getmenunodes(item.children)

);

render()

defaultopenkeys=

mode="inline"

theme="dark"

this.getmenunodes(menulist)

export default leftmenu;

React 列表渲染

第一種 將列表內容拼裝成陣列放置到模板中。第二種 將資料拼裝成陣列的jsx物件。import react from react import reactdom from react dom let arr 小明 小黑 小白 let arrhtml 小明,小黑,小白 class welcome ext...

React實現列表聯動

目錄結構 第乙個檔案是json資料 第二個檔案是入口 第三個檔案是實現主要功能 第四個檔案是樣式 insertfunction.jsx 第一種方法是 集合聯動 函式類別 p size small bordered true itemlayout horizontal datasource rende...

React例項 列表元件

現在src的目錄下面,新建乙個檔案xiaojiejie.js檔案,然後寫乙個基本的html結構。如下 import react,from react class xiaojiejie extends component export default xiaojiejie這個檔案現在還沒有什麼功能,只...