[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>
[React] React Fundamentals: transferPropsTo的更多相关文章
- [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 ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表－b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- React: React组件的生命周期
一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...
- React: React的属性验证机制
一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...
- React/react相关小结
React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...
- [React] React Fundamentals: Mixins
Mixins will allow you to apply behaviors to multiple React components. Components are the best way t ...
- [React] React Fundamentals: Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
随机推荐
- Visual Studio 创建代码注释默认模版方法
在日常的开发中我们经常需要为页面添加注释和版权等信息,这样我们就需要每次去拷贝粘贴同样的文字,为了减少这种重复性的工作,我们可以把这些信息保存在Visual Studio 2012类库模版文件里 1. ...
- 解决VC++6.0 无法打开、无法添加工程文件
在windows系统下,经常会遇到这样的问题:点击VC++6.0 的[文件]下的[打开]无法操作,并且无法向工程添加文件,下面详细介绍一下解决方案? 工具/原料 VC++6.0 修复工具:FileTo ...
- 免安装oracle驱动访问数据库
try { string connStr = "Data Source=(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=192.168.110.110)( ...
- C#中的cookie编程
Cookie就是所谓的" 小甜饼" ,他最早出现是在Netscape Navigator 2.0中.Cookie其实就是由Web服务器创建的.将信息存储在计算机上的文件.那么为什么 ...
- c程序设计语言_习题1-13_统计输入中单词的长度，并且根据不同长度出现的次数绘制相应的直方图
Write a program to print a histogram of the lengths of words in its input. It is easy to draw the hi ...
- 【转】简单几步让App Store软件下载快如迅雷 -- 不错！！！
原文网址:http://pad.zol.com.cn/237/2376160_all.html 下载速度慢的原因 1)国内用户从苹果软件商店下载软件速度很慢这是大家都知道的事实,究其原因就是苹 ...
- 【转】MFC中用CFile读取和写入文件2
原文网址:http://blog.sina.com.cn/s/blog_623a7fa40100hh1u.html CFile提供了一些常用的操作函数,如表1-2所示. 表1-2 CFile操作函数 ...
- 从头开始编写一个Orchard网上商店模块(6) - 创建购物车服务和控制器
原文地址: http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-pa ...
- Android 动画-alpha(渐变透明度动画效果)
今天苦于思索应用如何美观,首先从载入页面的第一眼开始,Android动画分为四种:alpha(渐变透明度),scale(渐变尺寸伸缩),translate(画面转换位置移动),rotate(画面转移旋 ...
- pop3
POP3_Client pop3 = new POP3_Client(); pop3, false); pop3.Authenticate("username", "pa ...