react学习：render props组件复用

问题导向

render props是什么？有什么用？

如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案

---

render props

本质：render props 是一个用于告知组件需要渲染什么内容的函数
作用：组件复用
原理：被复用的组件不直接展示内容，而是由调用的组件决定如何渲染

render是组件调用的名字而已，可以使用其他的名字

---

官方例子

鼠标获取的复用

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}  //重点这里：组件封装时，使用props.render，render其实是一个函数，把参数传递过去
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>移动鼠标!</h1>
        <Mouse render={mouse => (   //重点这里：调用组件时决定如何渲染
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}​

---

学习更多

react学习地图