码迷,mamicode.com
首页 > 其他好文 > 详细

render props的简单实用

时间:2020-03-27 00:55:44      阅读:55      评论:0      收藏:0      [点我收藏+]

标签:ops   component   event   eve   使用   mouse   lis   asc   pre   

1.实用目的:

在组件中,如果一个组件的某一个功能需要重复实用,那么就可以使用 render props方法。

2.步骤:

1) 创建某个组件,在组件中提供复用的状态(1.状态 2.修改状态的方法)

     
1.状态  
this.state = { x:0, y:0 }

  

2. 修改方式
mouseXY=e=>{ this.setState({ x:e.clientX, y:e.clientY }) } componentDidMount(){ window.addEventListener(‘mousemove‘,this.mouseXY) }

  2)将要复用的状态作为props.render(state)的方法,暴露到组件外部

  

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

  3)使用返回值 渲染内容

     <Mouse render={mouse =>{
        return <p>{mouse.x} , {mouse.y}  </p>   //mouse指的是从子元素传递过来的this.state数据
      }}></Mouse>

  

 

 

render props的简单实用

标签:ops   component   event   eve   使用   mouse   lis   asc   pre   

原文地址:https://www.cnblogs.com/ruoxiangli/p/12578617.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!