问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

初学 react,请教个问题？想让小球一秒亮，一秒暗该如何做

头像
清水寺小和尚
    73715111145
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/react/0.14.1/react.js"></script>
    <script src="http://cdn.bootcss.com/react/0.14.1/react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.32/browser.min.js"></script>
</head>
    <style>
        .ez-lamp{
            display : inline-block;
            margin : 5px;
            width : 30px;
            height : 30px;
            border-radius : 50%;
        }
        .ez-lamp.on{
            opacity : 1;
            background : -webkit-radial-gradient(30% 30%,white 5%,red 95%);
        }
        .ez-lamp.off{
            opacity : 0.5;
            background : -webkit-radial-gradient(30% 30%,#888 5%,red 95%);
        }
    </style>
<body>
    <div id="content"></div>
    <script type = "text/babel">
        //定义React组件
        var EzLampComp = React.createClass({
            render : function(){
                //取得属性值
                var onoff = this.props.onoff;
                
 setInterval(function(){
     if(onoff="on")
         return <span className = "ez-lamp off"></span>; 
else
                    return <span className = "ez-lamp off"></span>; 

 },1000);

                //返回React元素
                // if(onoff == "on")
                //     return <span className = "ez-lamp off"></span>;  //JSX
                // else
                //     return <span className = "ez-lamp on"></span>;  //JSX                      
                    
            }
        });
        //渲染React元素
        ReactDOM.render(
            <EzLampComp onoff="on"/> , //JSX
            document.querySelector("#content"));
    </script>
</body>
</html>
    javascriptreact
    阅读 3.2k
    1 个回答
    得票最新
    头像
    cnt1992
      1572
      ✓ 已被采纳

      这种可以用mixins去实现，也就是定时器这个其实是可复用的组件，楼主可以看一下可复用组件，下面贴一下我改了的代码，有啥不懂的可以问我哈

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/react/0.14.1/react.js"></script>
    <script src="http://cdn.bootcss.com/react/0.14.1/react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.32/browser.min.js"></script>
</head>
    <style>
        .ez-lamp{
            display : inline-block;
            margin : 5px;
            width : 30px;
            height : 30px;
            border-radius : 50%;
        }
        .ez-lamp.on{
            opacity : 1;
            background : -webkit-radial-gradient(30% 30%,white 5%,red 95%);
        }
        .ez-lamp.off{
            opacity : 0.5;
            background : -webkit-radial-gradient(30% 30%,#888 5%,red 95%);
        }
    </style>
<body>
    <div id="content"></div>
    <script type = "text/babel">
        var SetIntervalMixin = {
            componentWillMount: function() {
                this.intervals = [];
            },
            setInterval: function() {
                this.intervals.push(setInterval.apply(null, arguments));
            },
            componentWillUnmount: function() {
                this.intervals.forEach(clearInterval);
            }
        };
        //定义React组件
        var EzLampComp = React.createClass({
            mixins: [SetIntervalMixin], // 引用 mixin
            getInitialState: function() {
                return {
                    onoff: this.props.onoff
                }
            },
            componentDidMount: function() {
                this.setInterval(this.changeState, 1000);
            },
            changeState: function() {
                this.setState({
                    onoff: this.state.onoff === 'on' ? 'off' : 'on'
                })
            },
            render: function() {
                //取得属性值
                var cls = 'ez-lamp ' + this.state.onoff;
                return <span className={cls} ></span>;
            }
        });

        //渲染React元素
        ReactDOM.render(
            <EzLampComp onoff="on"/> ,
            document.querySelector("#content")
        );
    </script>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题