[React] React Fundamentals: transferPropsTo

最新推荐文章于 2024-05-24 18:35:21 发布

weixin_34380948

最新推荐文章于 2024-05-24 18:35:21 发布

阅读量87

点赞数

文章标签： javascript ViewUI

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>

weixin_34380948

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[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 = Reac...
复制链接

扫一扫