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.

  • 相关阅读:
    CISM国际注册信息安全经理认证与其他认证的差异
    CISD注册信息安全开发人员
    ISACA率先将技能网络安全培训与基于实际操作的考试和认证相结合
    信息安全意识
    2015版CISM国际注册安全经理中文教材
    如何持久建立信息安全意识宣贯/不解释
    北京CISSP免费考前模拟辅导讲座
    信息安全泄露越来越冲“钱”去
    利用碎片时间了解虚拟化安全---第一部分
    如何修改WAMP中mysql默认空密码
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7643666.html
Copyright © 2011-2022 走看看