[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 ...
随机推荐
- Mysql Not in有null值查询的问题
今天发现Mysql的not in使用的一个问题,大致是: select * from A where id not in (select fid from B). 发现查询结果无论如何都是0条记录.后 ...
- delphi xe3的helper语法 good
在C#中有一个很有用的helper保留字,它可以让我们对已有的类添加额外功能,当时就在想delphi有这个保留字就好了,这样许多控件就不需要继承重写了.后来delphi 果然有了这个语法,到delph ...
- The Little Redis Book
一.概念简介: Redis: Redis是一款开源的Key-Value数据库,运行在内存中,由ANSI C编写,详细的信息在Redis官网上面有,因为我自己通过google等各种渠道去学习Redis, ...
- 【HDOJ】1009 FatMouse' Trade
这道题目是一道非常简单的贪心,但是我却修改了1h+.原因就是qsort的comp有bug.其实还是题目中的数据可以为0.除数为0真的要慎重啊.后来改为结构体,加一层循环选取最大值,果然ac啊.wa了几 ...
- hdu4681String
http://acm.hdu.edu.cn/showproblem.php?pid=4681 枚举A串和B串包含C串的区间 枚举区间端点算左右两端最长公共子序 #include <iostre ...
- [Hadoop源码解读]（五）MapReduce篇之Writable相关类
前面讲了InputFormat,就顺便讲一下Writable的东西吧,本来应当是放在HDFS中的. 当要在进程间传递对象或持久化对象的时候,就需要序列化对象成字节流,反之当要将接收到或从磁盘读取的字节 ...
- BZOJ_1601_[Usaco2008_Oct]_灌水_(最小生成树_Kruskal)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1601 有\(n\)个田地需要灌溉,每个田地可以自己引水,花费为\(w[i]\),或者连接其他被 ...
- 调试UnhandledExceptionFilter
kernel32!UnhandledExceptionFilter通过判断当前进程是否附加了调试器,如果附加,就把异常交给调试器,如果没有,就把异常交给进程的UnhandledExceptionFil ...
- 对easyUI中课堂源码编辑改进建议
在孙宇老师讲得Easyui第10讲完后,基本的增删该查做出来了,但是编辑存在一个问题:行内样式编辑修改,如果当用户没有修改数据,孙宇老师讲得时候直接return,这样做是不合理的:第二次再使用右键编辑 ...
- 【转】java中静态代码块的用法 static用法详解
原文网址:http://www.cnblogs.com/panjun-Donet/archive/2010/08/10/1796209.html (一)java 静态代码块 静态方法区别一般情况下,如 ...