我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

如何做个react点击切换配色的功能呢?这就是本文的主要讨论内容。当然,本文还是用来给后续文章做铺垫的,虽然没有什么科技含量,但是非常的简单实用。

苏南大叔:react教程,如何点击按钮切换页面皮肤配色? - react-切换配色
react教程,如何点击按钮切换页面皮肤配色?(图3-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文使用皮肤配置定义切换,来实现的非常简单的react项目换肤功能。本文测试环境:create-react-app@5.0.1node@16.14.2react@18.2.0react-dom@18.2.0

网页换皮肤的方案很多,主要就是切换css。个人认为:本文中的方案并非最佳方案,保持引用不变,而直接切换css文件也许是更好的选择。

特别说明

本文使用的是函数式组件实现的功能,当然,也是可以使用类式组件来实现的。但是,本文并不是用于这个目的的,而是用于后续文章做铺垫的。所以,对此有异议的同学,可以参考下面的文章:

对于在react中如何使用css还不清楚的同学,可以参考这个文章:

基本定义

import React, { useState } from "react";
const themes = {
    light: {
        foreground: '#000',
        background: '#eee'
    },
    dark: {
        foreground: '#fff',
        background: '#222'
    }
}

苏南大叔:react教程,如何点击按钮切换页面皮肤配色? - 切换配色基础配置
react教程,如何点击按钮切换页面皮肤配色?(图3-2)

组件主体

const Sunan = () => {
    const [theme, setTheme] = useState(themes.dark);
    const change = () => {
        if (theme === themes.light) {
            setTheme(themes.dark);
        }
        else {
            setTheme(themes.light);
        }
    }
    return (
        <div>
            <style>{"button{margin:0px 1px;}"}</style>
            <p>
                <button
                    onClick={() => change()}
                    style={{ background: theme.background, color: theme.foreground }}>
                    {"点击切换"}
                </button>
                配色:{theme.foreground},{theme.background}
            </p>
        </div>
    );
};
export default Sunan;

苏南大叔:react教程,如何点击按钮切换页面皮肤配色? - 切换配色函数
react教程,如何点击按钮切换页面皮肤配色?(图3-3)

结束语

这个项目非常简单,就是简单的useState()的使用问题。更多react项目经验文章,请参考:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react