zoukankan      html  css  js  c++  java
  • [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.

  • 相关阅读:
    Windows Server 2008 R2域控组策略设置禁用USB
    Windows Server 2008 R2组策略设置计算机配置和用户配置
    Windows Server 2008 R2父域管理员与子域管理员相互登录访问
    转载:如何处理浏览器的断网情况?
    转载:浏览器缓存库设计总结(localStorage/indexedDB)
    手写启动一个本地服务器的命令行工具
    Node.js-核心模块-zlib
    使用console.log打印公司招聘信息和字符画
    转载:准备刷 leetcode 了,才发现自己连时间复杂度都不懂
    转载:前端通信那些事儿
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7643666.html
Copyright © 2011-2022 走看看