[React] Higher Order Components (replaces Mixins)
Higher order components will allow you to apply behaviors to multiple React components.
So the idea is to create a high order component, then use this hight order component to create multi same behaivor component.
So high order function is insdie function return another function, the same, high order component is inside component return another component.
let Mixin = InnerComponent => class extends React.Component {
constructor(){
super();
this.state = {val: }
}
update(){
this.setState({val: this.state.val + })
}
componentWillMount(){
console.log('will mount')
}
render(){
return <InnerComponent
update={this.update.bind(this)}
{...this.state}
{...this.props} />
}
componentDidMount(){
console.log('mounted')
}
}
Inside the Mixin Component, we define the behavior "update" which will be shared to the mixined components.
Define two component:
const Button = (props) => <button
onClick={props.update}>
{props.txt} - {props.val}
</button> const Label = (props) => <label
onMouseMove={props.update}>
{props.txt} - {props.val}
</label>
Mixin those two component with Mixin:
let ButtonMixed = Mixin(Button)
let LabelMixed = Mixin(Label)
Use it:
class App extends React.Component { render(){
return (
<div>
<ButtonMixed txt="Button" />
<LabelMixed txt="Label" />
</div>
);
} } ReactDOM.render(<App />, document.getElementById('app'));
-----
let Mixin = InnerComponent => class extends React.Component {
constructor(){
super();
this.state = {val: }
}
update(){
this.setState({val: this.state.val + })
}
componentWillMount(){
console.log('will mount')
}
render(){
return <InnerComponent
update={this.update.bind(this)}
{...this.state}
{...this.props} />
}
componentDidMount(){
console.log('mounted')
}
} const Button = (props) => <button
onClick={props.update}>
{props.txt} - {props.val}
</button> const Label = (props) => <label
onMouseMove={props.update}>
{props.txt} - {props.val}
</label> let ButtonMixed = Mixin(Button)
let LabelMixed = Mixin(Label) class App extends React.Component { render(){
return (
<div>
<ButtonMixed txt="Button" />
<LabelMixed txt="Label" />
</div>
);
} } ReactDOM.render(<App />, document.getElementById('app'));
[React] Higher Order Components (replaces Mixins)的更多相关文章
- [React Intl] Use a react-intl Higher Order Component to format messages
In some cases, you might need to pass a string from your intl messages.js file as a prop to a compon ...
- [React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component
In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that ...
- [React] Implement a Higher Order Component with Render Props
When making a reusable component, you'll find that people often like to have the API they're most fa ...
- 【转】Facebook React 和 Web Components(Polymer)对比优势和劣势
原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...
- Facebook React 和 Web Components(Polymer)对比优势和劣势
目录结构 译者前言 Native vs. Compiled 原生语言对决预编译语言 Internal vs. External DSLs 内部与外部 DSLs 的对决 Types of DSLs - ...
- [Redux] Understand Redux Higher Order Reducers
Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a ...
- [CS61A] Lecture 5&6&7. Environments & Design & Functions Examples & Homework 2: Higher Order Functions
[CS61A] Lecture 5&6&7. Environments & Design & Functions Examples & Homework 2: ...
- [React] Write Compound Components
Compound component gives more rendering control to the user. The functionality of the component stay ...
- [React Fundamentals] Composable Components
To make more composable React components, you can define common APIs for similar component types. im ...
随机推荐
- 推荐:ThoughtWorks(中国)程序员读书雷达
部分转自张逸的博客:http://agiledon.github.io/blog/2013/04/17/thoughtworks-developer-reading-radar/ 长久以来一直对程序员 ...
- [原]Unity3D深入浅出 - 常用类的成员变量和成员函数(Tranform、Time、Random、Mathf、Input)
Transform的成员变量 Transform的成员函数 Time类,获取和时间相关的信息,可用来计算帧速率,调整时间流逝的速度等. Random类,可用来生成随机数,随机点和旋转. Mathf类提 ...
- sencha touch 2 tabpanel中List的不显示问题,解决方案
笔者在做sencha项目的时候碰到一个需求,就是"好友列表"中分为"未确认好友"和"已确认好友",两个都是一个list,自然想到的就是使用t ...
- UVa 12096 (STL) The SetStack Computer
题意: 有一个集合栈计算机,栈中的元素全部是集合,还有一些相关的操作.输出每次操作后栈顶集合元素的个数. 分析: 这个题感觉有点抽象,集合还能套集合,倒是和题中配的套娃那个图很贴切. 把集合映射成ID ...
- A*算法完全理解
注:原文出自Patrick Lester,一稿翻译为Panic.很久以前的老文章了,但我觉得真的非常的经典,想把它完善一下让以后的人能够更好的体会原作者和原翻译的精髓吧.我在此基础上修改了部分译文,更 ...
- Ruby基础类型,动态特性,代码块
#Ruby内置基础数据类型 NilClass,TureClass,FalseClass,Time,Date,String,Range,Struct,Array,Hash #Numerice 1.分为I ...
- 我的Modbus Slave/Client开发历程(Rtu/AscII/Tcp)
我的Modbus Slave/Client开发历程(Rtu/AscII/Tcp) 分类: [自动化]2007-07-19 10:04 34038人阅读 评论(38) 收藏 举报 vb嵌入式dostcp ...
- ListView属性
1. 背景色: listView设置背景色android:background="@drawable/bg",拖动或者点击list空白位置的时候发现ListItem都变成黑色. 因 ...
- UPC OJ 一道水题 STL
Problem C: 字符串游戏 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 10 Solved: 3 [Submit][Status][Web ...
- js基础第八天
返回前面起第一个字符位置 indexOf("sdfsdf");它是从左边索引为0开始数,而且只找第一个,然后返回该字符的位置.返回是个数值.如果找不到该字符,那么就会返回-1. 返 ...