React练习 ：网页换肤

Posted 2020-11-30 sx00xs

在线效果浏览

需求：点击红、绿、黑 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‘)
);