React练习 :网页换肤
需求:点击红、绿、黑 3 个按钮,会切换至不同的背景色...
3 个组件:父组件 App,此处利用useEffect设置了网页加载后的默认设置。
子组件 Skin(按钮,用于切换背景),子组件Nav(导航按钮)
几点体会:
1.绑定事件处理时,忘记了编写()=>,导致组件渲染时直接触发了处理函数。
2.在对源数据进行修改时,不同直接修改源数据,需深度拷贝复制修改后,再调用setSkins来修改源数据,这样即可正常触发组件的重新渲染。
3.需使用useEffect设置一些网页加载后的默认设置。
4.不好意思,又直接使用了DOM原生方法来直接操作元素。。。
import React,{useState,useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function Skin(props){ const [skins,setSkins]=useState(props.skins); const handleClick=function(skin,index){ //需深度拷贝源数组,并对其进行修改,再使用setSkins对源数组修改 //否则不会重渲染 const newSkins=[...skins] ; for(var i=0;i<newSkins.length;i++) newSkins[i].isActive=false; newSkins[index].isActive=true; setSkins(newSkins); switch(index){ case 0: document.body.style.background='#FDD'; document.getElementById('nav').className=''; document.getElementById('nav').classList.add('red'); break; case 1: document.body.style.background='#A3C5A8'; document.getElementById('nav').className=''; document.getElementById('nav').classList.add('green'); break; case 2: document.body.style.background='#ccc'; document.getElementById('nav').className=''; document.getElementById('nav').classList.add('black'); break; default:document.body.style.background='#A3C5A8'; } } const listItems=skins.map((skin,index)=> <li key={skin.id} id={skin.id} title={skin.title} className={skin.isActive ? 'current' : ''} onClick={()=>handleClick(skin,index)} > {skin.value} </li> ); return( <ul id="skin">{listItems}</ul> ) } function Nav(props){ const navs = props.navs; const listNavs=navs.map((nav,index)=> <li className={[index==navs.length-1 ? 'last' :''] } key={nav.value}><a href="#">{nav.value}</a></li> ); return( <ul id="nav"> {listNavs} </ul> ) } const skins=[ {id:'red',title:'红色',isActive:false,value:'红'}, {id:'green',title:'绿色',isActive:true,value:'绿'}, {id:'black',title:'黑色',isActive:false,value:'黑'} ]; const navs=[ {value:'新闻'}, {value:'娱乐'}, {value:'体育'}, {value:'电影'}, {value:'音乐'}, {value:'旅游'} ] function App(){ useEffect(()=>{ document.body.style.background='#A3C5A8'; document.getElementById('nav').classList.add('green'); }) return( <div id="outer"> <Skin skins={skins}/> <Nav navs={navs}/> </div> ) }; ReactDOM.render( <App/>, document.getElementById('root') );