React四级菜单怎么实现
发表于：2024-11-19 作者：千家信息网编辑
千家信息网最后更新 2024年11月19日，本文小编为大家详细介绍"React四级菜单怎么实现"，内容详细，步骤清晰，细节处理妥当，希望这篇"React四级菜单怎么实现"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。效
千家信息网最后更新 2024年11月19日React四级菜单怎么实现
本文小编为大家详细介绍"React四级菜单怎么实现"，内容详细，步骤清晰，细节处理妥当，希望这篇"React四级菜单怎么实现"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
效果图
JS
import { Fragment, useState } from 'react';import styles from './style.less';const data1 = [ { name: '人口', 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '社会矛盾', id: 2, arr: [ { name: '嘻嘻哈哈', id: 1, type: 1 }, { name: '预警文案', id: 2, type: 2 }, { name: '预警文案', id: 3, type: 3 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '大联勤', id: 3, arr: [{ name: '预警文案', id: 1, type: 1 }] }, { name: '社会舆情', type: 3, id: 4, arr: [{ name: '预警文案', id: 1, type: 1 }], }, { name: '12345', id: 5, arr: [{ name: '预警文案', id: 1, type: 1 }] },];const data2 = [ { name: '人口', id: 1, type: 2, arr: [ { name: '预警文案', id: 1, type: 1 }, { name: '预警文案', id: 2, type: 2 }, { name: '预警文案', id: 6, type: 3 }, ], }, { name: '社会矛盾', id: 2, arr: [ { name: '预警文案', id: 1, type: 1 }, { name: '预警文案', id: 2, type: 2 }, { name: '预警文案', id: 3, type: 3 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '大联勤', id: 3, arr: [ { name: '预警文案', id: 1, type: 1 }, { name: '预警文案', id: 2, type: 2 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], },];const data3 = [ { 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: '财政税收', type: 2, id: 2, arr: [ { name: '预警文案', id: 1, type: 1 }, { name: '预警文案', id: 2, type: 2 }, { name: '预警文案', id: 4, type: 4 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '产业投资', id: 3, arr: [ { name: '预警文案', id: 1, type: 1 }, { name: '预警文案', id: 2, type: 2 }, { name: '预警文案', id: 3, type: 3 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '产业投资', id: 3, arr: [ { name: '预警文案', id: 1, type: 1 }, { name: '预警文案', id: 2, type: 2 }, { name: '预警文案', id: 3, type: 3 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '产业投资', id: 3, arr: [ { name: '预警文案', id: 1, type: 1 }, { name: '预警文案', id: 2, type: 2 }, { name: '预警文案', id: 3, type: 3 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], },];const data4 = [ { name: '人口', 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '社会矛盾', id: 2, type: 3, 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '大联勤', id: 3, 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '社会舆情', id: 4, 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '12345', id: 5, 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], },];const data5 = [ { name: '人口', 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: 2, arr: [ { name: '预警文案', id: 1, type: 1 }, { name: '预警文案', id: 2, type: 2 }, { name: '预警文案', id: 3, type: 3 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '大联勤', id: 3, type: 2, arr: [ { name: '预警文案', id: 1, type: 1 }, { name: '预警文案', id: 4, type: 4 }, { name: '预警文案', id: 5, type: 5 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], },];const data6 = [ { name: 'GDP', 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '财政税收', id: 2, 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '产业投资', type: 2, id: 3, 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '产业投资', type: 1, id: 4, 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], }, { name: '产业投资', type: 1, id: 5, 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: '预警文案', id: 6, type: 6 }, { name: '预警文案', id: 6, type: 6 }, ], },];const getRandomIntInclusive = (min, max) =>{ min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min;};const index = () =>{ 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]); // 标题的点击事件 const titleClick1 = (data) => { setMenuTop1(data); }; const titleClick2 = (data) => { setMenuTop2(data); } const titleClick3 = (data) => { console.log(data, '1111'); setMenuTop3(data); } const titleClick4 = (data) => { setMenuTop4(data); } const titleClick5 = (data) => { setMenuTop5(data); } const titleClick6 = (data) => { setMenuTop6(data); } const changeColor = (type) => { let lan = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d513511001e31b43f07a3' let hui = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d50ebfd73383908ca4506' let hong = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d50a4b5b1ce5fbbe3ce07' let huang = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d511322a0c670476cddc2' return type === 2 ? hui : type === 3 ? hong : type === 4 ? huang : lan } const widthAndHigh = (type) => { let random = getRandomIntInclusive(83, 99); let padding = null; let fontSize = null; let backgroundImage = `url(${changeColor(type)})` if (random >= 93) { padding = '26px'; fontSize = '16px'; } else if (random >= 83) { padding = '26px'; fontSize = '14px'; } else { padding = '26px'; fontSize = '18px'; } let size = { width: random, height: random, padding, fontSize, backgroundImage }; return size; }; // 根据类型判断背景颜色高亮 const fadeActive = (type) => { return type === 2 ? styles.fadeHui : type === 3 ? styles.fadeHong : type === 4 ? styles.fadeHuang : styles.lan } return ( {/* 小球球 */} {/* 开始~ */} {menuTop1.arr.map((data, index) => ( {data.name} ))} {menuTop2.arr.map((data, index) => ( {data.name} ))} {menuTop3.arr.map((data, index) => ( {data.name} ))} {menuTop4.arr.map((data, index) => ( {data.name} ))} {menuTop5.arr.map((data, index) => ( {data.name} ))} {menuTop6.arr.map((data, index) => ( {data.name} ))} {/* 结束~ */} {data1.map((data, index) => ( { titleClick1(data); }} key={index} > {data.name} {/* 背景线 */} ))} {data2.map((data, index) => ( { titleClick2(data); }} key={index}> {data.name} ))} {data3.map((data, index) => ( { titleClick3(data); }} key={index}> {data.name} ))} {data4.map((data, index) => ( { titleClick4(data); }} key={index}> {data.name} ))} {data5.map((data, index) => ( { titleClick5(data); }} key={index}> {data.name} ))} {data6.map((data, index) => ( { titleClick6(data); }} key={index}> {data.name} ))} );};export default index;CSS
.wrap { position: relative; transform-origin: 0px 0px; transform: scale(.5); // 压缩盒子 width: 3166px; height: 1440px; background: url('https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d4f5dfd73383908ca4505') no-repeat; background-size: 100% 100%; display: flex; justify-content: center;}.container { position: absolute; position: relative; width: 786px; height: 786px; margin-top: 403px; border-radius: 50%; // 底部公共文字 .centerName { display: inline-block; position: relative; margin: 2px 0 2px 46px; font-size: 19px; font-family: Source Han Sans CN-Regular, Source Han Sans CN; font-weight: 400; color: #FFFFFF; cursor: pointer; .fade { // display: none; position: absolute; top: 9px; width: 100%; height: 25px; border-radius: 2px; } // 高亮灰 .fadeHui { background: linear-gradient(rgba(227, 229, 230, 0), rgba(238, 239, 240, 0.2549019607), rgba(120, 127, 134, 0.56470588), rgba(120, 127, 134, 0.56470588), rgba(191, 195, 198, 1)); } // 高亮红 .fadeHong { background: linear-gradient(rgba(113, 56, 21, 0), rgba(222, 56, 6, 0.4117647058823), rgba(249, 67, 2, 0.423529411764), rgba(255, 122, 74, 0.9568627450)); } // 高亮黄 .fadeHuang { background: linear-gradient(rgba(113, 99, 21, 0), rgba(222, 156, 6, 0.411764705882), rgba(249, 163, 2, 0.423529411764), rgba(255, 234, 74, 0.95686274509)); } } .center1 { transform: rotate(-27deg); position: absolute; // position: relative; left: 65px; top: 40px; width: 337px; height: 176px; padding: 2px; .centerName:first-child { position: absolute; top: 25px; left: 155px; margin: auto; transform: rotate(-2deg); } .centerName:nth-child(2) { position: absolute; top: 33px; left: 227px; margin: auto; transform: rotate(9deg); } .centerName:nth-child(3) { position: absolute; top: 87px; left: 43px; margin: auto; transform: rotate(-15deg); } .centerName:nth-child(4) { position: absolute; top: 68px; left: 137px; margin: auto; transform: rotate(-3deg); } .centerName:nth-child(5) { position: absolute; top: 75px; left: 240px; margin: auto; transform: rotate(12deg); } } .center2 { display: inline-block; transform: rotate(-90deg); position: absolute; left: -33px; top: 318px; width: 337px; height: 176px; padding: 2px; .centerName:first-child { position: absolute; top: 7px; left: 53px; margin: auto; transform: rotate(-15deg); } .centerName:nth-child(2) { position: absolute; top: -3px; left: 140px; margin: auto; transform: rotate(-1deg); } .centerName:nth-child(3) { position: absolute; top: 14px; left: 251px; margin: auto; transform: rotate(17deg); } } .center3 { // transform: rotate(43deg); // position: absolute; // left: 0px; // bottom: 0px; // width: 337px; // height: 176px; // padding: 2px; transform: rotate(32deg); position: absolute; left: 48px; bottom: 0px; width: 337px; height: 176px; padding: 2px; .centerName:nth-child(5) { // transform: rotate(10deg); // position: absolute; // left: 0px; // bottom: -19px; // width: 337px; // height: 176px; // padding: 2px; transform: rotate(16deg); position: absolute; left: -12px; bottom: 135px; padding: 2px; } .centerName:nth-child(4) { // position: absolute; // top: -7px; // left: 149px; // margin: auto; // transform: rotate(-5deg); position: absolute; top: 22px; left: 134px; margin: auto; transform: rotate(1deg); } .centerName:nth-child(3) { // position: absolute; // top: -35px; // left: 250px; // margin: auto; // transform: rotate(-28deg); position: absolute; top: 7px; left: 228px; margin: auto; transform: rotate(-18deg); } .centerName:nth-child(2) { // position: absolute; // top: 37px; // left: 56px; // margin: auto; // transform: rotate(5deg); position: absolute; top: 56px; left: 39px; margin: auto; transform: rotate(13deg); } .centerName:nth-child(1) { // position: absolute; // top: 35px; // left: 176px; // margin: auto; // transform: rotate(-1deg); position: absolute; top: 62px; left: 166px; margin: auto; transform: rotate(-1deg); } } .center4 { transform: rotate(-33deg); position: absolute; left: 413px; bottom: -22px; width: 337px; height: 176px; padding: 2px; .centerName:nth-child(5) { position: absolute; top: -8px; left: 63px; margin: auto; transform: rotate(9deg); } .centerName:nth-child(2) { position: absolute; top: 30px; left: 49px; margin: auto; transform: rotate(7deg); } .centerName:nth-child(3) { position: absolute; top: -8px; left: 226px; margin: auto; transform: rotate(-13deg); } .centerName:nth-child(4) { position: absolute; top: 3px; left: 138px; margin: auto; transform: rotate(1deg); } .centerName:nth-child(1) { position: absolute; top: 44px; left: 163px; margin: auto; transform: rotate(-3deg); } } .center5 { transform: rotate(94deg); position: absolute; right: -155px; top: 318px; width: 337px; height: 176px; .centerName:first-child { position: absolute; top: 150px; left: 38px; margin: auto; transform: rotate(-15deg); } .centerName:nth-child(2) { position: absolute; top: 131px; left: 118px; margin: auto; transform: rotate(-5deg); } .centerName:nth-child(3) { position: absolute; top: 139px; left: 222px; margin: auto; transform: rotate(17deg); } } .center6 { display: inline-block; transform: rotate(33deg); position: absolute; right: 90px; top: 84px; width: 337px; height: 176px; padding: 2px; .centerName:first-child { position: absolute; top: -18px; left: 138px; margin: auto; transform: rotate(-3deg); } .centerName:nth-child(2) { position: absolute; top: -8px; left: 223px; margin: auto; transform: rotate(15deg); } .centerName:nth-child(3) { position: absolute; top: 42px; left: 43px; margin: auto; transform: rotate(-15deg); } .centerName:nth-child(4) { position: absolute; top: 27px; left: 134px; margin: auto; transform: rotate(1deg); } .centerName:nth-child(5) { position: absolute; top: 40px; left: 240px; margin: auto; transform: rotate(20deg); } }}// 相对于中间定位.ballBox { position: absolute; position: relative; width: 100%; height: 100%; .childName { display: flex; align-items: center; text-align: center; margin: 5px; width: 83px; height: 82px; border-radius: 50%; text-align: center; padding: 15px; color: #fff; background-size: 100% 100%; } .childNameEven { padding: 18px; } .childNameOdd { margin-top: 10px; } // 小球球 .ball { position: absolute; position: relative; display: flex; justify-content: center; flex-wrap: wrap; width: 500px; height: 250px; padding: 30px; } .ball1 { left: -102px; top: -179px; transform: rotate(-29deg); } .ball2 { left: -349px; top: 13px; transform: rotate(-90deg); } .ball3 { left: -91px; top: 188px; transform: rotate(29deg); } .ball4 { left: 384px; top: -55px; transform: rotate(-29deg); } .ball5 { left: 642px; top: -722px; transform: rotate(90deg); } .ball6 { left: 394px; top: -1424px; transform: rotate(29deg); } .child { display: none; position: absolute; position: relative; display: flex; justify-content: center; flex-wrap: wrap; left: -220px; top: -300px; width: 500px; height: 250px; padding: 30px; .childName { display: flex; // justify-content: center; align-items: center; text-align: center; margin: 5px; // display: inline-block; width: 83px; height: 82px; border-radius: 50%; background-color: red; text-align: center; padding: 15px; } .childNameEven { display: flex; // justify-content: center; align-items: center; text-align: center; margin: 5px; // display: inline-block; // width: 80px; // height: 80px; // font-size: 16px; border-radius: 50%; background-color: red; text-align: center; padding: 18px; background: url('https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d50a4b5b1ce5fbbe3ce07') no-repeat center; background-size: 100% 100%; color: #fff; } .childNameOdd { display: flex; // justify-content: center; align-items: center; text-align: center; margin: 5px; // display: inline-block; // width: 83px; // height: 83px; // padding: 18px; // font-size: 14px; border-radius: 50%; background: url('../../assets/shengtaihuanjing/lan.png') no-repeat center; background-size: 100% 100%; text-align: center; margin-top: 10px; color: #fff; } }}读到这里，这篇"React四级菜单怎么实现"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。
文案
预警
菜单
产业
按钮
社会
切换
投资
矛盾
人口
高亮
文章
内容
小球
税收
背景
舆情
财政
嘻嘻
妥当
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
私密视频软件开发者能看到吗
网络安全法发送的电子信息
阿里巴巴网络技术合作
综合业务管理服务器多少钱
河南计算机软件开发大概多少钱
企业网络安全负责人怎么处理
vb梦工厂数据库
汽车网络技术服务收费
湖州看着互联网科技有限公司
数据库的数据类型该怎么选择
ios系统不开源软件开发
语音交友软件开发流程
易语言怎样打印数据库
刷机后显示数据库异常
云服务器测速命令
轻量应用服务器装win7
国家网络安全官方微博
软考数据库有必要考吗
数据库中属于数据控制语言的是
淄博生产管理软件开发公司
河南计算机软件开发大概多少钱
数据库建立并合并
打开sql数据库的方法
db2 实例 数据库
网络安全日常化
网络安全组织名称
互联网如何成为一个服务器
网络安全靠人民我们该怎么做
个人信息网络安全宣传单设计
联通网络技术大会论文
