React中的render props技术是一种将一个组件的数据低耦合的传递到另外一个组件的技术,传递媒介为props。我们来通过一个例子看看render props到底干啥的。

首先我们实现一个方块拖拽的效果:

上面我们实现了一个简单的方块拖拽效果,它的内部主要包含计算层和展现层,计算层就是计算当前的位置x和y,展现层则是那x,y来设置left和top。为了提高复用率,我们将计算层和展现层分开,这样以后只要给一个展现层就可以拥有拖拽的功能了。

HOC props分离

首先就是用HOC来分离:

render props分离

就是在Mouse组件的props上写一个render方法,它返回一个展现层:

children props分离

还有一种就是将展现层放在Mouse标签里面,然后Mouse渲染的时候,通过this.props.children获取展现层。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字