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.

  • 相关阅读:
    Missing Number
    python乱码,讲得比较好,
    公司搬家,拿了个费机器,没root密码,又忘了怎么搞了,
    mylyn
    eclipse shortcut binding
    jdk8 eclipse luna market crashed
    openjdk
    download plugin update site for offline installation
    armstrong's programming erlang 2nd
    sdf SimpleDateFormat 不是线程安全的,
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7643666.html
Copyright © 2011-2022 走看看