版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第React四級(jí)菜單的實(shí)現(xiàn)效果圖
JS
import{Fragment,useState}from'react';
importstylesfrom'./style.less';
constdata1=[
name:'人口',
id:1,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'社會(huì)矛盾',
id:2,
arr:[
{name:'嘻嘻哈哈',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:6,type:6},
{name:'大聯(lián)勤',id:3,arr:[{name:'預(yù)警文案',id:1,type:1}]},
name:'社會(huì)輿情',
type:3,
id:4,
arr:[{name:'預(yù)警文案',id:1,type:1}],
{name:'12345',id:5,arr:[{name:'預(yù)警文案',id:1,type:1}]},
constdata2=[
name:'人口',
id:1,
type:2,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:6,type:3},
name:'社會(huì)矛盾',
id:2,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'大聯(lián)勤',
id:3,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
constdata3=[
name:'GDP',
type:3,
id:1,
arr:[
{name:'龍哥第一',id:1,type:1},
{name:'濤濤第二',id:2,type:2},
{name:'余暢第一',id:3,type:3},
{name:'阿川',id:4,type:4},
{name:'宇宙',id:5,type:5},
{name:'第一',id:6,type:6},
name:'財(cái)政稅收',
type:2,
id:2,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:6,type:6},
name:'產(chǎn)業(yè)投資',
id:3,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'產(chǎn)業(yè)投資',
id:3,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'產(chǎn)業(yè)投資',
id:3,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
constdata4=[
name:'人口',
id:1,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'社會(huì)矛盾',
id:2,
type:3,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'大聯(lián)勤',
id:3,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'社會(huì)輿情',
id:4,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'12345',
id:5,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
constdata5=[
name:'人口',
id:1,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
name:'社會(huì)矛盾',
id:2,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'大聯(lián)勤',
id:3,
type:2,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
constdata6=[
name:'GDP',
id:1,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'財(cái)政稅收',
id:2,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'產(chǎn)業(yè)投資',
type:2,
id:3,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'產(chǎn)業(yè)投資',
type:1,
id:4,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
name:'產(chǎn)業(yè)投資',
type:1,
id:5,
arr:[
{name:'預(yù)警文案',id:1,type:1},
{name:'預(yù)警文案',id:2,type:2},
{name:'預(yù)警文案',id:3,type:3},
{name:'預(yù)警文案',id:4,type:4},
{name:'預(yù)警文案',id:5,type:5},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
{name:'預(yù)警文案',id:6,type:6},
constgetRandomIntInclusive=(min,max)=
min=Math.ceil(min);
max=Math.floor(max);
returnMath.floor(Math.random()*(max-min+1))+min;
constindex=()=
const[menuId1,setMenuId1]=useState(1);//菜單1的按鈕切換
const[menuTop1,setMenuTop1]=useState(data1[0]);
const[menuId2,setMenuId2]=useState(1);//菜單2的按鈕切換
const[menuTop2,setMenuTop2]=useState(data2[0]);
const[menuId3,setMenuId3]=useState(1);//菜單3的按鈕切換
const[menuTop3,setMenuTop3]=useState(data3[0]);
const[menuId4,setMenuId4]=useState(1);//菜單4的按鈕切換
const[menuTop4,setMenuTop4]=useState(data4[0]);
const[menuId5,setMenuId5]=useState(1);//菜單5的按鈕切換
const[menuTop5,setMenuTop5]=useState(data5[0]);
const[menuId6,setMenuId6]=useState(1);//菜單6的按鈕切換
const[menuTop6,setMenuTop6]=useState(data6[0]);
//標(biāo)題的點(diǎn)擊事件
consttitleClick1=(data)=
setMenuTop1(data);
consttitleClick2=(data)=
setMenuTop2(data);
consttitleClick3=(data)=
console.log(data,'1111');
setMenuTop3(data);
consttitleClick4=(data)=
setMenuTop4(data);
consttitleClick5=(data)=
setMenuTop5(data);
consttitleClick6=(d
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2022年9月國(guó)開(kāi)電大行管專(zhuān)科《社會(huì)調(diào)查研究與方法》期末紙質(zhì)考試試題及答案
- 戶外環(huán)境中的緊急情況識(shí)別
- 勞資專(zhuān)管員考試試題及答案
- 新疆和田地區(qū)和田市輔警考試公安基礎(chǔ)知識(shí)考試真題庫(kù)及答案
- 四平市公務(wù)員遴選考試模擬試題及答案
- 醫(yī)師考核口腔試題及答案
- 2025職業(yè)病危害及預(yù)防措施試題帶答案
- 軍事科技問(wèn)答試題及答案
- 叉車(chē)司機(jī)五級(jí)試題+參考答案
- 郴州市輔警考試公安基礎(chǔ)知識(shí)考試真題庫(kù)及答案
- 2025年日語(yǔ)能力測(cè)試N4級(jí)真題模擬備考試卷
- DB62∕T 4203-2020 云杉屬種質(zhì)資源異地保存庫(kù)營(yíng)建技術(shù)規(guī)程
- 年終歲末的安全培訓(xùn)課件
- 中醫(yī)康復(fù)面試題目及答案
- 《人工智能導(dǎo)論》高職人工智能通識(shí)課程全套教學(xué)課件
- 中華醫(yī)學(xué)會(huì)麻醉學(xué)分會(huì)困難氣道管理指南
- 南京旅館住宿管理辦法
- 【香港職業(yè)訓(xùn)練局(VTC)】人力調(diào)查報(bào)告書(shū)2024-珠寶、鐘表及眼鏡業(yè)（繁體版）
- 客戶分配管理辦法管理
- 燃?xì)馊霊舭矙z培訓(xùn)
- 高中地理思政融合課《全球氣候變暖》
評(píng)論
0/150
提交評(píng)論