22.render-props

• 22.render-props
  • 1.React组件复用概述
  • 2.render props 模式
  • 3.使用步骤
  • 4.演示 Mouse组件的复用
  • 5.children代替render属性
  • 6.代码优化
  • 7.相关代码:

1.React组件复用概述

2.render props 模式

3.使用步骤

4.演示 Mouse组件的复用

5.children代替render属性

6.代码优化

7.相关代码:

// render props 模式

// Mouse 组件
class Mouse extends React.Component {
  // 鼠标位置 x ,y
  state = {
    x: 0,
    y: 0
  }
  // 鼠标移动事件的事件处理程序
  handleMove = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }
  // 监听鼠标移动事件
  componentDidMount() {
    window.addEventListener('mousemove', this.handleMove)
  }
  // 推荐: 在组件卸载时移除事件绑定
  componentWillUnmount() {
    window.removeEventListener('mousemove', this.handleMove)
  }
  render() {
    // return null
    // 使用children   ⭐⭐⭐
    return this.props.children(this.state)
  }
}
// props校验
Mouse.protoTypes = {
  children: PropTypes.func.isRequired
}


class Render extends React.Component {
  render() {
    return (
      <div>
        <h1>render props 模式</h1>
        {/* <Mouse render={(mouse) => {
          return (
            <p>鼠标的位置: x:{mouse.x},  y:{mouse.y}</p>
          )
        }} /> */}
        <Mouse>     ⭐⭐⭐
          {
            (mouse) => {
              return (
                <p>鼠标的位置: x:{mouse.x},  y:{mouse.y}</p>
              )
            }
          }
        </Mouse>

        {/* <Mouse render={mouse => {
          return (
            <img src={img} alt="猫" style={{ position: 'absolute', left: mouse.x - 50, top: mouse.y - 50 }} />
          )
        }} /> */}
        <Mouse>        ⭐⭐⭐
          {
            mouse => {
              return (
                <img src={img} alt="猫" style={{ position: 'absolute', left: mouse.x - 50, top: mouse.y - 50 }} />
              )
            }
          }
        </Mouse>
      </div>
    )
  }
}