render props實現了 子元件A共享父元件B的邏輯實現，換句話說，就是共享有關元件B的如：邏輯運算得出的狀態值、dom節點的事件監聽等。在dom結構上，子元件A被包裹在父元件B裡面。實現的函式語句為：

<B render={stateData => (
  <A data={stateData}> />
)}/>

render props儘量用在一些比較重複性的邏輯上的共享，如滑鼠事件等，下面是一個完成的Demo，定義一個滑鼠跟蹤邏輯的元件Mouse.jsx：

import React from 'react';

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 id="mouseMove" style={{width: "0px",height: "0px"}} onMouseMove={this.handleMouseMove}>
        		{this.props.render(this.state)}
      		    </div>
		);
	}
}

export default Mouse;
 

另外，定義一個元件RenderPropsDemo.jsx來繼承滑鼠跟蹤邏輯，即主要獲取滑鼠的x和y座標：

import React from 'react';

class RenderPropsDemo extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const mouse = this.props.mouse;
		console.log(mouse);
		return(
			<div style={{width: "500px",height: "500px",backgroundColor: "gray"}}>
				{mouse.x},{mouse.y}
			</div>
		);
	}
}

export default RenderPropsDemo;
 

邏輯共享實現：

import React from 'react';
import Mouse from './components/hoc/Mouse.jsx'; 
import RenderPropsDemo from './components/hoc/RenderPropsDemo.jsx'; 

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {};
	}

	render() {
		return(
      		<Mouse render={mouse => (
      			<RenderPropsDemo mouse={mouse} />
    		)}/>
		);
	}
}

export default App;
 

這樣，元件RenderPropsDemo即使不新增滑鼠移動監聽，也可以實現滑鼠跟蹤的邏輯。注意，RenderPropsDemo元件是被包裹在Mouse元件裡的，渲染的元素節點如下圖所示：