zoukankan      html  css  js  c++  java
  • [React] React Fundamentals: transferPropsTo

    the transferPropsTo method lets you easily push properties into your components to easily customize attributes.

    From last two exmaples, we have BButton adn BHeart set up.

        var BButton = React.createClass({
           render: function() {
               return (
                 <a className="btn btn-primary">{this.props.children}</a>
               );
           }
        });
        var BHeart =
                React.createClass({
                    render:function(){
                        return <span className="glyphicon glyphicon-heart"></span>
                    }
                });

    To get more fixability, we don't want button to be 'btn-primary' and icon to be 'glyphicon-hear', we may want something else.

    Here we update the code:

        var BButton = React.createClass({
           render: function() {
               return this.transferPropsTo(
                 <a className="btn">{this.props.children}</a>
               );
           }
        });
    
        var BIcon =
                React.createClass({
                    render:function(){
                        return this.transferPropsTo(<span className="glyphicon"></span>);
                    }
                });

    We take away 'btn-primay' and 'glyphicon-heart', let them just be a BButton and BIcon.

    Then in the App, we can set whatever we want:

        var App = React.createClass({
            render: function(){
                return (
                        <div>
                         <BButton className="btn-danger">I <BIcon className="glyphicon-fire"></BIcon> React</BButton>
                         <BButton className="btn-warning">I <BIcon className="glyphicon-heart"></BIcon> React</BButton>
                         <BButton className="btn-success">I <BIcon className="glyphicon-home"></BIcon> React</BButton>
                        </div>
                );
            }
        });

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>React Lesson 6: Accessing Child Properties</title>
        <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
    </head>
    <body>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
    <script type="text/jsx">
        /** @jsx React.DOM */
    
        var App = React.createClass({
            render: function(){
                return (
                        <div>
                         <BButton  href="javascript:alert('Hello');" className="btn-danger">I <BIcon className="glyphicon-fire"></BIcon> React</BButton>
                         <BButton  href="javascript:alert('Hello');"className="btn-warning">I <BIcon className="glyphicon-heart"></BIcon> React</BButton>
                         <BButton  href="javascript:alert('Hello');" className="btn-success">I <BIcon className="glyphicon-home"></BIcon> React</BButton>
                        </div>
                );
            }
        });
    
        var BButton = React.createClass({
           render: function() {
               return this.transferPropsTo(
                 <a className="btn">{this.props.children}</a>
               );
           }
        });
    
        var BIcon =
                React.createClass({
                    render:function(){
                        return this.transferPropsTo(<span className="glyphicon"></span>);
                    }
                });
    
    
        React.render(<App />, document.body);
    </script>
    </body>
    </html>
  • 相关阅读:
    搭建nexus私服(maven)
    maven配置本地仓库(从本地仓库下载jar包到.m2仓库)
    关于引入多个jquery冲突的问题(附一个很好用的validate前端验证框架及使用方法)
    java excel导出
    Eclipse+Maven创建webapp项目 及部署在tomcat上
    solr添加IK分词和自己定义词库
    将Mysq数据导入solr索引库
    solr +zookeeper+Jetty 集群搭建
    solr +zookeeper+tomcat 集群搭建
    如何用Maven创建web项目(具体步骤)转载
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4363447.html
Copyright © 2011-2022 走看看