• 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')
    );
  • 相关阅读:
    (转)【web前端培训之前后端的配合(中)】继续昨日的故事
    ural(Timus) 1136. Parliament
    scau Josephus Problem
    ACMICPC Live Archive 6204 Poker End Games
    uva 10391 Compound Words
    ACMICPC Live Archive 3222 Joke with Turtles
    uva 10132 File Fragmentation
    uva 270 Lining Up
    【转】各种字符串哈希函数比较
    uva 10905 Children's Game
  • 原文地址:https://www.cnblogs.com/sx00xs/p/11816408.html
Copyright © 2020-2023  润新知