React_Render-props.js

import React from 'react';

class Cat extends React.Component {
	render() {
	  const mouseposition = this.props.mouseposition;
	  return (
		<img src="https://dummyimage.com/30x30/000/fff" style={{ position: 'absolute', left: mouseposition.x -30, top: mouseposition.y -30 }} />
	  );
	}
  }

  class Mouse extends React.Component {
	render() {
	  const mouseposition = this.props.mouseposition;
	  return (
		<img src="https://dummyimage.com/30x30/ccc/fff" style={{ position: 'absolute', left: mouseposition.x, top: mouseposition.y }} />
	  );
	}
  }
  
class Func 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: '100%', width: '100%' }} onMouseMove={this.handleMouseMove}>

		{/*
		Instead of providing a static representation of what <Mouse> renders,
		use the `render` prop to dynamically determine what to render.
		*/}
		{this.props.render(this.state)}
	</div>
	);
}
}
  
export default class MouseTracker extends React.Component {
	render() {
		return (
		<div style={{height: '100vh'}}>
			<h1>Move your mouse</h1>
			<Func render={mouseposition => (
				<div>
					{/* Tu peux passer les props d'un component à l'autre! */}
					<h1>x: {mouseposition.x} y: {mouseposition.y}</h1>
					<Mouse mouseposition={mouseposition} />
					<Cat mouseposition={mouseposition} />
				</div>
			)}/>
		</div>
		);
	}
}