在react中简单的实现切换功能

最新推荐文章于 2024-07-17 14:42:11 发布

原创最新推荐文章于 2024-07-17 14:42:11 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #css #javascript

我的React的学习记录专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在React中利用useState Hook 和三目运算符轻松实现颜色切换功能。通过设置状态变量并根据其值改变组件的样式，点击不同的按钮可以切换背景色和文字颜色。这是一个基础的React交互实现，适合React初学者。

在react中简单的实现切换功能

1.设置一个变量用useState保存，方便后面修改

const [state,setState]=useState(true)
这里的初始值是随便设置的，也可设置其他的，我这里就用boolean类型的吧

2.HTML部分

因为我是在微信小程序写的，View看作div就可以了

    <View>
      <View
        style={{
          （注：这里运用的是三目运算法，state为true时执行第一个，否则执行第二个）
          backgroundColor: state ? "orange" : "#eeeeee",
          color: state ? "white" : "black",
        }}
        onClick={() => {
          setState(true);
        }}
      >
        小程序
      </View>

      <View
        style={{
        （注：这里运用的是三目运算法，state为true时执行第一个，否则执行第二个）
          backgroundColor: !state ? "orange" : "#eeeeee",
          color: !state ? "white" : "black",
        }}
        onClick={() => {
          setState(false);
        }}
      >
        APP
      </View>
    </View>

在点击小程序的时候将state值修改为true，点击APP的时候将state值修改为false。以下是切换效果：
（1）点击小程序时：
在这里插入图片描述
（2）点击APP时：