第07节、React组件小实例

最新推荐文章于 2023-08-11 11:11:06 发布

DreamFive

最新推荐文章于 2023-08-11 11:11:06 发布

阅读量151

点赞数

分类专栏： React入门和组件

React入门和组件专栏收录该内容

15 篇文章 0 订阅

订阅专栏

生命周期实例

这个案例是自定义一个组件，并把组件进行不断闪烁，形成一种动画形式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习React</title>
</head>
<body>
    <div id="reactContainer"></div>

    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script type="text/babel">
        var AddCount = React.createClass({
            getInitialState:function () {
                return {opacity:1};
            },
            componentDidMount:function () {
                setInterval(function () {
                    var opacity = this.state.opacity;
                    opacity -= .05;
                    if(opacity < 0.1){
                        opacity = 1;
                    }
                    this.setState({
                        opacity:opacity
                    });
                }.bind(this), 200)
            },
            render:function () {
              return (
                  <div style={{opacity:this.state.opacity}}>
                      <h2>hello {this.props.name}</h2>
                  </div>
              )
            },
        });

        ReactDOM.render(
            <AddCount name="style"/>,
            document.getElementById('reactContainer')
        );

    </script>
</body>
</html>

DreamFive

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第07节、React组件小实例

生命周期实例这个案例是自定义一个组件，并把组件进行不断闪烁，形成一种动画形式。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-widt
复制链接

扫一扫

专栏目录