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>
  • 相关阅读:
    C:把算术表达式分成Token
    JavaScript数据结构——链表的实现与应用
    JavaScript数据结构——队列的实现与应用
    JavaScript数据结构——栈的实现与应用
    由“RangeError: Invalid status code: 0”错误所引发的思考
    工作是最好的投资——图书摘录
    Node.js在指定的图片模板上生成二维码图片并附带底部文字说明
    苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法
    自定义react数据验证组件
    Ubuntu 18.04中截图工具Shutter的编辑按钮不可用的解决办法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4363447.html
Copyright © 2011-2022 走看看