React练习 13:02_07_简易选项卡
需求:mouseover 标签时,自动切换内容
解析:设定一个boolean值,用于切换类的添加/删除,来显示/隐藏对应内容
import React,{useState} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function Simplecard(props){ const [lessons,setLesson]=useState(props.lessons); const handleOver=function(index){ var newlessons=[...lessons]; for(var i=0;i<newlessons.length;i++) newlessons[i].isActive=false; newlessons[index].isActive=true; setLesson(newlessons); } return( <div id="outer"> <ul id="tab"> {lessons.map((lesson,index)=> <li key={lesson.name} className={lesson.isActive ? 'current' : ''} onMouseOver={()=>handleOver(index)}> {lesson.name} </li> )} </ul> <div id="content"> {lessons.map((lesson,index)=> <ul key={index} className={lesson.isActive ? 'current' : ''}> {lesson.content.map((content)=> <li key={content}> {content} </li> )} </ul> )} </div> </div> ) } const lessons=[ { name:'第一课', content:[ '网页特效原理分析', '响应用户操作', '提示框效果', '事件驱动', '元素属性操作', '动手编写第一个JS特效', '引入函数', '网页换肤效果', '展开/收缩播放列表效果' ], isActive:true }, { name:'第二课', content:[ '改变网页背景颜色', '函数传参', '高重用性函数的编写', '126邮箱全选效果', '循环及遍历操作', '调试器的简单使用', '典型循环的构成', 'for循环配合if判断', 'className的使用', 'innerHTML的使用', '戛纳印象效果', '数组', '字符串连接' ], isActive:false }, { name:'第三课', content:[ 'JavaScript组成:ECMAScript、DOM、BOM,JavaScript兼容性来源', 'JavaScript出现的位置、优缺点', '变量、类型、typeof、数据类型转换、变量作用域', '闭包:什么是闭包、简单应用、闭包缺点', '运算符:算术、赋值、关系、逻辑、其他运算符', '程序流程控制:判断、循环、跳出', '命名规范:命名规范及必要性、匈牙利命名法', '函数详解:函数构成、调用、事件、传参数、可变参、返回值', '定时器的使用:setInterval、setTimeout', '定时器应用:站长站导航效果', '定时器应用:自动播放的选项卡', '定时器应用:数码时钟', '程序调试方法' ], isActive:false } ]; ReactDOM.render( <Simplecard lessons={lessons}/>, document.getElementById('root') )