《Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程》 和 《零基础学习 Vue3 教程 2021 年最新教程 免费视频教程》 正在更新

世界上最伟大的投资就是投资自己的教育

剧场模式
首页前端ReactReact 进阶提高免费视频教程 - 技巧篇 - 第 1 季

React 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)

随风 · 元婴发布于3475 次点击
5

https://www.rails365.net/movies/react-jin-jie-ti-gao-8-gao-jie-zu-jian

https://www.rails365.net/movies/react-jin-jie-ti-gao-10-yong-gao-jie-zu-jian-lai-chong-gou-dai-ma

https://reactjs.org/docs/render-props.html

https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce

https://zhuanlan.zhihu.com/p/31267131

重写前

import React from 'react';

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 = (props) => {
  const { x, y } = props.mouse
  return (
    <div style={{ height: '100%' }}>
      <h1>The mouse position is ({ x }, { y })</h1>
    </div>
  )
}

const AppWithMouse = withMouse(App)


export default AppWithMouse;

重写后

import React from 'react';
import PropTypes from 'prop-types';

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 Position = ({ x, y }) => {
  return (
    <h1>The mouse position is ({ x }, { y })</h1>
  )
}

const Position1 = ({ x, y }) => {
  return (
    <p>The mouse position is ({ x }, { y })</p>
  )
}

const App = () => {
  return (
    <div style={{ height: '100%' }}>
      <Mouse render={(props) => <Position { ...props } />} />
      <Mouse render={(props) => <Position1 { ...props } />} />
    </div>
  )
}

export default App;
7 条回复
热门课程 love
喜欢
微信群讲师微信知乎服务号github视频号
程序员随风
课程目录

1FreeReact 技巧 #1 如何用 netlify 云服务部署 React 应用

2FreeReact 技巧 #2 把 React 应用部署到 GitHub Pages

3FreeReact 技巧 #3 React-router 教程 part 1

4FreeReact 技巧 #4 React-router 教程 part 2

5FreeReact 进阶提高免费视频教程 #5 React.PureComponent

6FreeReact 进阶提高免费视频教程 #6 Fragment

7FreeReact 进阶提高免费视频教程 #7 context(上下文)

8FreeReact 进阶提高免费视频教程 #8 高阶组件

9FreeReact 进阶提高免费视频教程 #9 强大酷炫好玩的 web IDE 工具(鼠标点击生成代码,缩减 N 倍开发时间)

10FreeReact 进阶提高免费视频教程 #10 用高阶组件来重构代码

11FreeReact 进阶提高免费视频教程 #11 我最爱的 React 库 - 功能强大的可插入组件(简化代码)

12FreeReact 进阶提高免费视频教程 #12 返回多个组件的正确方式

13FreeReact 进阶提高免费视频教程 #13 netlifyctl 一键部署前端应用

14FreeReact 进阶提高免费视频教程 #14 defaultProps 和 类型检查 PropTypes part 1

15FreeReact 进阶提高免费视频教程 #15 类型检查 PropTypes part 2

FreeReact 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)

17FreeReact 进阶提高免费视频教程 #17 错误边界和生命周期函数 componentDidCatch

18FreeReact 进阶提高免费视频教程 #18 升级到 16.3

19FreeReact 进阶提高免费视频教程 #19 探索 bind (this) 的写法

20FreeReact 进阶提高免费视频教程 #20 React 16.3 全新的 Context API

21FreeReact 进阶提高免费视频教程 #21 React 16.3 全新的 Context API - 实践

22FreeReact 进阶提高免费视频教程 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践

23FreeReact 进阶提高免费视频教程 #23 对象,数组,可变数据

24FreeReact 进阶提高免费视频教程 #24 React.Children API 和 props.children 讲解

25FreeReact 进阶提高免费视频教程 #25 如何使用 styled-components

26FreeReact 进阶提高免费视频教程 #26 如何使用 styled-components(实践篇)

27FreeReact 进阶提高免费视频教程 #27 你应该使用 redux-form(介绍)

28FreeReact 进阶提高免费视频教程 #28 你应该使用 redux-form(实践篇)

29FreeReact 进阶提高免费视频教程 #29 React Portals(学习方法)

30FreeReact 进阶提高免费视频教程 #30 使用 React Portals 实现 Modal 框(part 1)

31FreeReact 进阶提高免费视频教程 #31 使用 React Portals 实现 Modal 框(part 2)

32FreeReact 进阶提高免费视频教程 #32 使用 React Portals 实现 Modal 框(part 3)

33FreeReact 进阶提高免费视频教程 #33 使用 React Portals 实现 Modal 框(part 4)

学员(98)
wdy · 合体破妄之眼 · 太乙symbolmale · 合体JesusCracker · 道祖vaveee@qq.com · 道祖biantonghai · 太乙BuTing · 真仙j921216063 · 道祖温文尔雅 · 道祖smile · 道祖Russ · 道祖教主 · 大乘
最新动态
wdy · 合体学习到了0:14
破妄之眼 · 太乙学习到了11:04
symbolmale · 合体学习到了1:02
JesusCracker · 道祖学习到了11:29
vaveee@qq.com · 道祖学习到了0:01
统计信息
    学员: 19886
    视频数量: 1241
    帖子数量: 443

© 汕尾市求知科技有限公司 | 关注我们 | 专业版网站 | 在线学员:1140

粤公网安备 44152102000088号 | 粤ICP备19038915号

Top