• 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')
    );
  • 相关阅读:
    lnmp搭建禅道项目
    Vue 常用指令
    vue-tools
    阿里巴巴iconfont使用
    vue创建项目
    yarn 安装vue
    php 名字中间加星号
    图片转base64
    php阿里云短信功能
    php实名认证,身份证号,姓名加照片比对
  • 原文地址:https://www.cnblogs.com/sx00xs/p/11816408.html
Copyright © 2020-2023  润新知