[React] Use a Render Porp
More detail check LInk.
Render Prop vs HOC:
HOC version for withMouse:
import React from 'react'
import ReactDOM from 'react-dom' const withMouse = (Component) => {
return class extends React.Component {
state = { x: 0, y: 0 } handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
} render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
<Component {...this.props} mouse={this.state}/>
</div>
)
}
}
} const App = React.createClass({
render() {
// Instead of maintaining our own state,
// we get the mouse position as a prop!
const { x, y } = this.props.mouse return (
<div style={{ height: '100%' }}>
<h1>The mouse position is ({x}, {y})</h1>
</div>
)
}
}) // Just wrap your component in withMouse and
// it'll get the mouse prop!
const AppWithMouse = withMouse(App) ReactDOM.render(<AppWithMouse/>, document.getElementById('app'))
Problems:
- Indirection. We still have the same problem with indirection that we had when we were using mixins. Except this time instead of wondering where our state comes from we’re wondering which HOC provides which props.
- Naming collisions. Unfortunately we still have this problem too. Two HOCs that try to use the same prop name will collide and overwrite one another, except this time it’s slightly more insidious because React won’t warn us about the prop name collision.
Render Prop:
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types' // Instead of using a HOC, we can share code using a
// regular component with a render prop!
class Mouse extends React.Component {
static propTypes = {
render: PropTypes.func.isRequired
} state = { x: 0, y: 0 } handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
} render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
{this.props.render(this.state)}
</div>
)
}
} const App = React.createClass({
render() {
return (
<div style={{ height: '100%' }}>
<Mouse render={({ x, y }) => (
// The render prop gives us the state we need
// to render whatever we want here.
<h1>The mouse position is ({x}, {y})</h1>
)}/>
</div>
)
}
}) ReactDOM.render(<App/>, document.getElementById('app'))
- Indirection. We don’t have to wonder where our state or props are coming from. We can see them in the render prop’s argument list.
- Naming collisions. There is no automatic merging of property names, so there is no chance for a naming collision.
Render Prop give some kind of feelings that, in the parent component, you pass a function into Child component's prop. This function is defining how the Child component should look like. The Child component just need call the function and pass in the state which needed for rendering.
[React] Use a Render Porp的更多相关文章
- react 实现pure render的时候,bind(this)隐患
react 实现pure render的时候,bind(this)隐患 export default class Parent extends Component { ... render() { c ...
- 使用React.Fragment替代render函数中div的包裹
1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...
- react props与render成员函数
props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...
- react初学之render返回加括号的问题
刚在学习react的初始阶段,跑了一段代码 var Mydom = React.createClass({ render:function(){ return <div> <inp ...
- React 的 server render 初步学习
所谓server render 即服务端渲染,这是为了解决现代前端框架下的单页应用在SEO方面不友好的问题. react 的SSR主要思路就是 1.将应用的根组件导出 如 <App /> ...
- [React Router v4] Render Multiple Components for the Same Route
React Router v4 allows us to render Routes as components wherever we like in our components. This ca ...
- [React Router v4] Render Catch-All Routes with the Switch Component
There are many cases where we will need a catch-all route in our web applications. This can include ...
- [React Router v4] Render Nested Routes
With React Router v4 the entire library is built as a series of React components. That means that cr ...
- React js ReactDOM.render 语句后面不能加分号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
随机推荐
- caioj 1067动态规划入门(一维一边推5: 乘积最大(高精度版))
因为这里涉及到乘号的个数,那么我们可以用f[i][j]表示前i个位乘号为j个时的最大乘积 那么相比上一题就是多了一层枚举多少个乘号的循环,可以得出 f[i][r] = max(f[j - 1][r - ...
- Android笔记---Intent实现Activity跳转
学了之前的Android控件以及布局,我们就能够做一些UI的设计了,这里我结合之前的知识.以一个小的登录项目来解说下Activity之间跳转. 先看下效果图: 1.登录界面: 2.点击登录按钮跳转到另 ...
- Android 使用DrawerLayout高速实现側滑菜单
一.概述 DrawerLayout是一个能够方便的实现Android側滑菜单的组件,我近期开发的项目中也有一个側滑菜单的功能.于是DrawerLayout就派上用场了.假设你从未使用过DrawerLa ...
- 为OLED屏添加GUI支持3:字库
为OLED屏添加GUI支持3:字库 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN10 开发环境:MDK5.13 MCU:STM3 ...
- 第6章8节《MonkeyRunner源代码剖析》Monkey原理分析-事件源-事件源概览-小结
本章我们重点环绕处理网络过来的命令的MonkeySourceNetwork这个事件源来阐述学习Monkey是怎样处理MonkeyRunner过来的命令的.以下总结下MonkeyRunner从启动Mon ...
- [Python] Scatter Plot for daily return
Sploe = 2: means that SPY move up 1, ABC move up 2 Correlation: how close those dots close to the li ...
- KVM硬件辅助虚拟化之 EPT in Nested Virtualization
在嵌套虚拟环境(Nested Virtualization)下,执行在hypervisor上的Virtual Machine仍能够作为hypervisor去执行其他的Virutal Machine,而 ...
- 理解ThreadLocal类
1 ThreadLocal是什么 早在JDK 1.2的版本号中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路. 使用这个工具类能够 ...
- Using a Plugin
创建hello.world <?xml version="1.0"?> <sdf version="1.4"> <world na ...
- CentOS 搭建 Mysql MMM 高可用架构
环境 CentOS Mysql 5.1 前提 安装了EPEL,详细安装步骤请參照 http://blog.csdn.net/robinsonmhj/article/details/36184863 机 ...