[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 ...
随机推荐
- push 栈顶sp=sp-2 可以把立着的栈，向左侧倒下，那么形态就和反汇编时，内存的形态是一样的。小偏移的字节在前， 大的偏移字节在后
push 栈顶sp=sp-2 可以把立着的栈,向左侧倒下,那么形态就和反汇编时,内存的形态是一样的.小偏移的字节在前, 大的偏移字节在后. 1 2 3 4 5 1 2 3 4 5
- [JAVA]HDU 4919 Exclusive or
题意很简单, 就是给个n, 算下面这个式子的值. $\sum\limits_{i=1}^{n-1} i \otimes (n-i)$ 重点是n的范围:2≤n<10500 比赛的时候 OEIS一下 ...
- Cocos2d-x 3.2编译Android程序错误的解决方案
最近的升级Cocos2d-x 3.2正式版.iOS不管是什么程序编译问题,使用结果cocos compile -p android编译APK计划.结果悲剧,出现以下错误. Android NDK: I ...
- 中文乱码的分析 和 从Eclipse设置启动JVM时的字符集(转)
最近时常碰到中文乱码的问题,eclipse的编码环境设置的都是UTF-8,外部也是以UTF-8的编码进行传参的,但是遇到中文的时候还是因为乱码而产生一系列的错误.在网上查了许多资料,发现这是跟JVM的 ...
- 指令 scope
angular学习笔记(三十)-指令(8)-scope <!DOCTYPE html> <html ng-app="myApp"> <head> ...
- eclipse 修改设置Ctrl+Shift+F长度
在window的Preferences中的Java->Code Style->Formatter 到了这一步就是找到Ctrl+Shift+F的格式化模板了,这里不能直接修改.因为是ecli ...
- 找出Java进程中大量消耗CPU
原文:https://github.com/oldratlee/useful-shells useful-shells 把平时有用的手动操作做成脚本,这样可以便捷的使用. show-busy-java ...
- 察看so文件的依赖关系
使用arm-linux-androideabi-readelf 察看依赖动态库 /android-ndk-r8d/toolchains/arm-linux-androideabi-4.7/prebui ...
- zookeeper环境的搭建
接管条件:磁盘上原数据完全一样,而自动接管,则是由zookeeper 实现的 FailloverController:控制namenode状态:检查namenode:通过远程协议
- 【HTML】Intermediate4：Tables:rowspan and colspan
1.</th> header cell As with td elements,these must be enclosed inside tr elements 2.</tr co ...