[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 ...
随机推荐
- 记intel杯比赛中各种bug与debug【其四】:基于长短时记忆神经网络的中文分词的实现
(标题长一点就能让外行人感觉到高大上) 直接切入主题好了,这个比赛还必须一个神经网络才可以 所以我们结合主题,打算写一个神经网络的中文分词 这里主要写一下数据的收集和处理,网络的设计,代码的编写和模型 ...
- HDU-1789 Doing Homework again 贪心问题 有时间限制的最小化惩罚问题
题目链接:https://cn.vjudge.net/problem/HDU-1789 题意 小明有一大堆作业没写,且做一个作业就要花一天时间 给出所有作业的时间限制,和不写作业后要扣的分数 问如何安 ...
- 在MAC上安装lxml到Python3
首先可以直接使用以下命令安装lxml,但是会默认安装到Python2,没有找到怎么指定安装到Python3 sudo easy_install lxml 想要安装到Python3需要先安装pip: s ...
- 【Henu ACM Round#15 F】Arthur and Questions
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] a1+a2+...+ak<a2+a3+...ak+1 ->a1<ak+1 a2+a3+...+ak+1<a3 ...
- 设置UITableViewCell高度的问题
有非常多时候.UITableViewCell每行的高度是不固定的,须要动态设置. UITableView有个代理方法, -(CGFloat)tableView:(UITableView *)table ...
- SpringMvc 系统启动时加载数据到内存中
SpringMvc 系统启动时加载数据到内存中 学习了:http://blog.csdn.net/newstruts/article/details/18668269 https://www.cnbl ...
- 使用Opencv2遇到error C2061: 语法错误: 标识符dest
在写代码是遇到了这样一个问题,error C2061: 语法错误: 标识符"dest": 1>d:\opencv\opencv\build\include\opencv2\f ...
- android系统又一次刷ROM简记(一)
当须要对android系统进行大刀阔斧的改造的时候,应该清晰的了解android各个image的组成才干做到庖丁解牛. 首先在android烧写过程中须要烧写的文件主要包含uboot.bin\boot ...
- php数组增加元素
php数组增加元素 截图 代码 <HTML> <HEAD> <TITLE>给数组增加元素</TITLE> </HEAD> <? $Ci ...
- 《读书报告 – Elasticsearch入门 》----Part II 深入搜索(2)
第十三章 全文检索 这一章开始介绍 全文检索 :怎样对全文字段(full-text fields)进行检索以找到相关度最高的文档. 全文检索最重要的两个方面是: 相关度(Relevance) 根据文档 ...