react函数组件实现切换主题的效果

主题切换效果

主题切换

实现思路 ：
存储两个属性，一个用来存储颜列表，另一个是控制第几个颜色的变化，默认是0
给需要变换button按钮绑定active属性
当我们点击切换主题时，需要进行一个判断，如果颜色的长度大于我们color的长度，就让他显示第一个颜色，否则执行颜色加1操作

代码实现

import {useState, useEffect} from 'react'

function Login() {

    const [color, setColor] = useState(['pink','blue','red'])
    const [active, setActive] = useState(0)
    return (
        <div className="App">
            <span className='cut' onClick={
                                () => {
                                    if (active >= 2) {
                                        setActive(0)
                                    } else {
                                        setActive(active + 1)
                                    }
                                }}>切换主题</span>
                            
            <Button style={{background: color[active]}}>
                登录
            </Button>
        </div>
    );
}
 
export default Login;