react-props.render

import React from 'react';
class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <div>{mouse.x},{mouse.y}</div>
    );
  }
}

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 - event.currentTarget.offsetTop
    });
  }

  render() {
    return (
      <div onMouseMove={this.handleMouseMove} style={{ height: '500px',background: 'pink' }}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}
export default MouseTracker