版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(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)益歸上傳用戶(hù)所有。
- 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年網(wǎng)絡(luò)接口適配器合作協(xié)議書(shū)
- 工作假期旅游特殊證明(5篇)
- 農(nóng)村畜牧養(yǎng)殖技術(shù)指導(dǎo)協(xié)議
- IT服務(wù)行業(yè)技術(shù)支持工作經(jīng)驗(yàn)證明(7篇)
- 企業(yè)級(jí)軟件開(kāi)發(fā)維護(hù)合作協(xié)議
- 農(nóng)村家庭土地承包經(jīng)營(yíng)合同
- 零售行業(yè)年度收入證明(6篇)
- 快遞配送時(shí)間保障協(xié)議
- 工程建筑資料承包包干合同
- IT行業(yè)在職員工信息真實(shí)性證明(5篇)
- 2025年山東省濟(jì)南市萊蕪區(qū)中考一模地理試卷（原卷版+解析版）
- 測(cè)繪地理信息科技創(chuàng)新與成果轉(zhuǎn)化作業(yè)指導(dǎo)書(shū)
- 2025春季學(xué)期國(guó)開(kāi)電大專(zhuān)科《政治學(xué)原理》一平臺(tái)在線(xiàn)形考(形考任務(wù)四)試題及答案
- SCI論文寫(xiě)作與投稿 第2版-課件 14-SCI論文投稿與發(fā)表
- 快速血糖監(jiān)測(cè)操作
- 動(dòng)漫游戲與衍生品開(kāi)發(fā)作業(yè)指導(dǎo)書(shū)
- 畢業(yè)設(shè)計(jì)（論文）-垂直循環(huán)立體車(chē)庫(kù)機(jī)械設(shè)計(jì)
- 醫(yī)院會(huì)計(jì)考核試題及答案
- 十字相乘法(最終版)
- 2025年山西萬(wàn)家寨水務(wù)控股集團(tuán)限公司公開(kāi)招聘工作人員48人自考難、易點(diǎn)模擬試卷（共500題附帶答案詳解）
- 廣東東軟學(xué)院《英語(yǔ)語(yǔ)法I》2023-2024學(xué)年第二學(xué)期期末試卷
評(píng)論
0/150
提交評(píng)論