React——04高阶组件之Render Props

import React, { Component } from 'react'
import  ReactDOM  from 'react-dom'
export default class App extends Component {
    constructor(props){
        super(props)
        this.mouseClick = this.mouseClick.bind(this)
        this.state = {
            x:0,
            y:0
        }
    }
    mouseClick(event){
        this.setState({
            x:event.clientX,
            y:event.clientY
        })
    }
    componentDidMount(){
        window.addEventListener('mousemove',this.mouseClick)
    }
/*     componentWillUnmount(){
        window.addEventListener('mousemove',this.mouseClick)
    } */
    render() {
        return (
            <div>
               <p> {this.state.x + '为x的坐标'}</p>
               <p> {this.state.y + '为y的坐标'}</p>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.querySelector('#root'))

// <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: '100vh' }} onMouseMove={this.handleMouseMove}>
        {/* ...但我们如何渲染 <p> 以外的东西? */}
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}
class MouseTracker extends React.Component {
  render() {
    return (
      <>
        <h1>移动鼠标!</h1>
        <Mouse />
      </>
    );
  }
}