React 组件复用之props模式（props-children）

1、创建PropsChildren组件，代码如下：

import React from 'react'

export default class PropsChildrenextends React.Component {
    state = {
        x: 0,
        y: 0
    }

    moveMouse =  e => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        })
    }

    componentDidMount() {
        window.addEventListener('mousemove', this.moveMouse)
    }

    componentWillUnmount() {
        window.removeEventListener('mousemove', this.moveMouse)
    }

    render() {
        return this.props.render(this.state)
    }
}

2、组件运用

import React from 'react'
import PropsChildren from './components/move-mouse/PropsChildren'

function App() {
    return (
        <div className="App">
            <PropsChildren>
                {
                    move => {
                        return (<p>鼠标当前坐标：{move.x}，{move.y}</p>)
                    }
                }
            </PropsChildren>
    )
}

export default App