react实现点击变色小功能

最新推荐文章于 2024-07-04 20:21:08 发布

qq_43373622

最新推荐文章于 2024-07-04 20:21:08 发布

阅读量4.5k

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_43373622/article/details/114021869

版权

本文探讨了两种在React中动态改变元素样式的常见方法：通过添加或移除className以及直接修改style属性。方法一是利用className结合CSS类实现背景色变化，需要重新渲染组件；方法二是直接在style内设置条件样式，点击时即时更新背景色。这两种方式各有特点，适用于不同的场景。

摘要由CSDN通过智能技术生成

方法一：通过className添加类名的方式

当点击实现变色的时候，需要重新使用render函数进行渲染

<style>
    .isActive {
        background-color: red;
    }
</style>

<body>
    <div id="app">

    </div>
    <script type="text/babel">
        let arr = [1, 2, 3, 4];
        let num;
        let fun = () => {
            return arr.map((v, i) => {
                return <h1 key={i} onClick={() => {
                    num = i;
                    console.log(num)
                    render()//这里需要使用render函数重新渲染
                }} className={num == i ? "isActive" : ""}> {v}</h1 >;
            })
        }

        let render = () => ReactDOM.render(fun(), document.getElementById("app"))
        render()
    </script>

在这里插入图片描述

方法二：通过style直接修改样式的方式

 <div id="app">

    </div>
    <script type="text/babel">
        let arr = [1, 2, 3, 4];
        let num;
        let fun = () => {
            return arr.map((v, i) => {
                return <h1 key={i} onClick={() => {
                    num = i;
                    render()//
                }} style={{ backgroundColor: i == num ? "red" : "" }}> {v}</h1 >;
            })
        }

        let render = () => ReactDOM.render(fun(), document.getElementById("app"))
        render()
    </script>

qq_43373622

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
react实现点击变色小功能

方法一：通过className添加类名的方式当点击实现变色的时候，需要重新使用render函数进行渲染<style> .isActive { background-color: red; }</style><body> <div id="app"> </div> <script type="text/babel"> let arr = [1, 2, 3,
复制链接

扫一扫