react：按钮控制组件渲染不渲染，组件里的div颜色随着滚动条变化而随机变化

最新推荐文章于 2023-07-25 23:37:05 发布

hemeng0115

最新推荐文章于 2023-07-25 23:37:05 发布

阅读量780

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/hemeng0115/article/details/85270001

React 专栏收录该内容

3 篇文章

订阅专栏

这篇博客探讨了如何使用React实现按钮控制组件的渲染状态，并且组件内的div背景颜色会根据滚动条的变化而随机变化。通过监听滚动事件和设置state，实现了交互式的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="react.min.js"></script>
    <script src="react-dom.min.js"></script>
    <script src="browser.min.js"></script>
    <style>
        body {
            height: 2000px;
        }
        #app {
            position: fixed;
        }
        .world{
            background-color: chartreuse;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
//    toggle按钮控制组件渲染不渲染
//    组件里的div颜色随着滚动条变化而随机变化
    let Hello=React.createClass({
        getInitialState(){
          return{
              isShow:true
          }
        },
        changeState(){
          this.setState({isShow:!this.state.isShow})
        },
        render(){
            return(
                <div>
                    <button onClick={this.changeState}>切换</button>
                    {
                        !this.state.isShow||<World/>
                    }
                </div>
            )
        }
    })
let World=React.createClass({
    componentWillUnmount(){
        window.removeEventListener('scroll',this.changeColor)
    },
    getInitialState(){
        return{
            color:'red'
        }
    },
    changeColor(){
        console.log(111)
        let color=this.getRandomColor()
        this.setState({color:color})
    },
    getRandomColor(){
       return '#'+Math.floor(Math.random()*16777215).toString(16);
    },
    render(){
        return(
                <div className="world" style={{background:this.state.color}}>
                    <button onClick={this.changeColor}>点击变色</button>
                    111
                </div>
        )
    },
    componentDidMount(){
        window.addEventListener('scroll',this.changeColor)
    }
})
    ReactDOM.render(<Hello/>,app);
   /* 1、改变颜色
    2、随机颜色
    3、随着滚动条改变*/
</script>
</body>
</html>