d2React组件

最新推荐文章于 2022-08-31 15:00:17 发布

代码搬运工w

最新推荐文章于 2022-08-31 15:00:17 发布

阅读量122

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_41055071/article/details/108065645

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

render-props高阶组件

在这里插入图片描述


function WithMouse(WiappedComponent){
    class Mouse extends React.Component{
            // 鼠标位置state
            state={
                x:0,
                y:0
            }
            handleMouseMove=(e)=>{
                this.setState({
                    x:e.clientX,
                    y:e.clientY
                })
            }
            // 监听鼠标移动事件//在组件渲染完成之后调用
            componentDidMount() {
                window.addEventListener('mousemove',this.handleMouseMove)
            }
            render(){
                // return this.props.render(this.state)
                return <WiappedComponent {...this.state} />
            }
        
        }
    return Mouse
}

// 把最后要展示的UI给封装起来
function Position(props) {
    return (
        <p>
            X:{props.x}
            Y:{props.y}
        </p>
    )
}
// 把position 组件来进行包装
let MousePosition = WithMouse(Position)

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                高阶组件
                <MousePosition></MousePosition>
            </div>
        )
    }
}
// ReactDOM.render(<WiappedComponent ></WiappedComponent>,document.getElementById('root'))
ReactDOM.render(<App></App>,document.getElementById('root'))