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>

[React] React Fundamentals: transferPropsTo的更多相关文章

  1. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  2. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  3. React/React Native 的ES5 ES6写法对照表-b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  4. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  5. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

  6. React: React的属性验证机制

    一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...

  7. React/react相关小结

    React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...

  8. [React] React Fundamentals: Mixins

    Mixins will allow you to apply behaviors to multiple React components. Components are the best way t ...

  9. [React] React Fundamentals: Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

随机推荐

  1. [unity菜鸟] controller.SimpleMove(transform .forward); 无法移动

    今天做demo时遇到一个问题:当使用角色控制器操作物体,用 controller.SimpleMove(transform .forward); 语句时物体不能移动,搜索请教了很久,最后终于googl ...

  2. chrome插件 postman插件 接口测试、API & HTTP 请求调试工具

    Postman 是一个非常棒的Chrome扩展,提供功能强大的API & HTTP 请求调试. 它能够发送任何类型的HTTP requests (GET, HEAD, POST, PUT..) ...

  3. 【HDOJ】2065 "红色病毒"问题

    刚开始看这道题目的时候,完全没看出来是递推.看了网上大牛的分析.立刻就明白了.其实无论字符串长度为多少,都可以将该长度下的组合分成四种情况S1(A偶数C偶数).S2(A偶数C奇数).S3(A奇数C偶数 ...

  4. libvlc 双击,鼠标事件消息响应

    基于vlc 2.1 动态库实现接收双击消息的接收,使双击vlc播放画面可以全屏显示. 需要其他版本的vlc可以与我联系(有偿进行修改) 下载地址:http://download.csdn.net/de ...

  5. bzoj1027

    感觉网上很多题解写的似乎不清楚,这里说一下我的思路显然对于每个用户的材料(设其比例为Ai,Bi,Ci),我们要么最多用3种原料(设其比例为ai,bi,ci)混合成需要材料,要么一定混合不成,具体原因往 ...

  6. AHOI2009最小割

    1797: [Ahoi2009]Mincut 最小割 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1072  Solved: 446[Submit] ...

  7. cmd for 用法

    1:for命令及变量 基本格式: FOR /参数 %variable IN (set) DO command [command_parameters] %variable:指定一个单一字母可替换的参数 ...

  8. [转]关于WM_NCHITTEST消息

    http://www.cnblogs.com/GnagWang/archive/2010/09/12/1824394.html 我为了移动一个无标题栏的窗体,使用了WM_NCHITTEST消息,这个消 ...

  9. LightOJ 1356 Prime Independence 二分图最大独立集,HK算法

    这个题唯一需要说的就是普通的匈牙利算法是O(nm)的,过不了 然后HK算法可以O(n^0.5m),这个算法可以每次找很多同样长度的最短增广路 分析见:http://www.hardbird.net/l ...

  10. 分割函数和根据Id串返回名字

    需求:函数传入一个字符串参数 例如  123-456 将这个字符串123-456拆成两个值 123   456,在通过两个值分别查出数据(例如 张三  李四),拼接成     张三-李四 --声明变量 ...