reactjs学习——制作button组件

最新推荐文章于 2024-06-11 12:00:26 发布

weixin_34268610

最新推荐文章于 2024-06-11 12:00:26 发布

阅读量159

点赞数

文章标签： javascript 数据库前端 ViewUI

原文链接：http://www.cnblogs.com/tsai5277/p/5553893.html

版权

　　前端时间一直在折腾nodejs，好不容易有点搞懂express框架想要作业登录注册系统来练练手，路由搞好了，ajax搞好了，页面也搞好了，兴冲冲的准备测试了，麻蛋我忘记世界上有一种东西叫数据库，还没连数据库/(ㄒoㄒ)/~~网上好多都是教mangoDB，又要重新学，搞来搞去没弄好/(ㄒoㄒ)/~~等我折腾好了再来写nodejs。

　　reactjs太火啦，感觉不去学学有点对不起web工程师的名头哈哈哈哈哈哈，学了几天自己做了一个button的组件，和bootstrap那个有点像，先来说说学习reactjs。

　　虽然已经火了好久，但是资料还是不是特别多啊，我在学的时候被添加style样式烦了很久（还是没弄清楚），然后正式版本又没出来，facebook一直在改改改，可是国内更新进度跟不上，导致很多资料都是以前版本的，哎，以后还是自己看英文的啦，老子英语这么好不能废了哈哈哈。

　　我学的时候觉得这两个讲的很好，推荐下：

　　　　入门实例教程 - 阮一峰的网络日志（！推荐，这个日志会随版本更新！）这个真的是入门啦，我每个做了两遍以上，会让你懂一些基本操作方法，多做几遍就有感觉了。当然说说入门，要理解react还差远了，我做完里面的demo其实还是糊里糊涂的，然后噔噔噔就要推荐下面这个了。

　　　　ReactJS 生命周期、数据流与事件有很多网页都有写react组件的生命周期，但我看了以后，觉得这个讲的最好！我把他打印下来好好研究了！虽然我现在对销毁&清理期这部分还是懵逼状态。

　　　　现在来放下我写的button组件哟~

　　　　效果：

　　　　代码：　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReactButton</title>
    <script type="text/javascript" src="build/react.js"></script>
    <script type="text/javascript" src="build/react-dom.js"></script>
    <script type="text/javascript" src="build/browser.min.js"></script>
    <style type="text/css">
        .box{
            float: left;
            margin:20px;
            }</style>
</head>
<body>
    <div id="Primary" class="box"></div>
    <div id="Success" class="box"></div>
    <div id="Danger" class="box"></div>
    <script type="text/babel">
        var MyReactButton=React.createClass({
            getDefaultProps:function(){
                return{
                    children:'button',
                    pattern:'Primary'
                };
            },
            getInitialState:function(){
                return{
                        opacity:'0.92',
                };
            },
            handleMouseover:function(){
                    this.setState({
                    opacity:1
                });
            },
            handleMouseout:function(){
                this.setState({
                    opacity:'0.92'
                });

            },
            render:function(){
                var styles={
                    Primary:{
                        opacity:this.state.opacity,
                        backgroundColor:'#2e6da4',
                        padding:'6px 12px',
                        color:'#fff',
                        border:'1px solid #2e6da4',
                        borderRadius:'4px',
                        fontSize:'14px',
                    },
                    Success:{
                        opacity:this.state.opacity,
                        backgroundColor:'#4cae4c',
                        padding:'6px 12px',
                        color:'#fff',
                        border:'1px solid #4cae4c',
                        borderRadius:'4px',
                        fontSize:'14px'
                    },
                    Danger:{
                        opacity:this.state.opacity,
                        backgroundColor:'#d43f3a',
                        padding:'6px 12px',
                        color:'#fff',
                        border:'1px solid #d43f3a',
                        borderRadius:'4px',
                        fontSize:'14px'
                    },
                };
                return(
                     <button style={styles[this.props.pattern]} className={this.props.className} onMouseOver={this.handleMouseover} onMouseOut={this.handleMouseout}>{this.props.children}</button>
                     );
             }
        });

        ReactDOM.render(<MyReactButton pattern='Primary'>Primary</MyReactButton>,
        document.getElementById('Primary'));
        ReactDOM.render(<MyReactButton pattern='Success'>Success</MyReactButton>,
        document.getElementById('Success'));
        ReactDOM.render(<MyReactButton pattern='Danger'>Danger</MyReactButton>,
        document.getElementById('Danger'));
    </script>
</body>
</html>

现在来讲下疑问：

1）怎么把共有的style属性提取出来，类似于mixin那样，这样有些我就不用重复写了，可惜我弄了好久还是没弄明白/(ㄒoㄒ)/~~有知道的说下啊

2)我把jsx文件单独写一个文件而不是写进HTML，可是老是报错

转载于:https://www.cnblogs.com/tsai5277/p/5553893.html

weixin_34268610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
reactjs学习——制作button组件

　　前端时间一直在折腾nodejs，好不容易有点搞懂express框架想要作业登录注册系统来练练手，路由搞好了，ajax搞好了，页面也搞好了，兴冲冲的准备测试了，麻蛋我忘记世界上有一种东西叫数据库，还没连数据库/(ㄒoㄒ)/~~网上好多都是教mangoDB，又要重新学，搞来搞去没弄好/(ㄒoㄒ)/~~等我折腾好了再来写nodejs。　　reactjs太火啦，感觉不去学学有点对不起web工程师的...
复制链接

扫一扫