render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码(个人理解：将组件进行函数化，通过调用组件名实现，组件的利用，以元素的形式调用，并渲染画面)
/ <Mouse> 组件封装了我们需要的行为...
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: ‘100%‘ }} onMouseMove={this.handleMouseMove}>
{/* ...但我们如何渲染 <p> 以外的东西? */}
<p>The current mouse position is 但我们如何渲染 以外的东西({this.state.x}, {this.state.y})</p>
</div>
);
}
}
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 MouseWithCat 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%‘ }} onMouseMove={this.handleMouseMove}>
{/*
我们可以在这里换掉 <p> 的 <Cat> ......
但是接着我们需要创建一个单独的 <MouseWithSomethingElse>
每次我们需要使用它时，<MouseWithCat> 是不是真的可以重复使用.
*/}
<Cat mouse={this.state} />
</div>
);
}
}
class MouseMove extends React.Component {
render() {
return (
<div>
<h1>移动鼠标!</h1>
<MouseWithCat /> ／／实现以上组件的全部调用
</div>
);
}
}
