react.js 高阶组件----很简单的实例理解高阶组件…

2018-06-24 00:22:40来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

调试代码之前,我设置了两个缓存

分别是username和content

在控制台console设置两个缓存代码

localStorage.setItem('username','老王')
localStorage.setItem('content','类容')

运行下面代码一定要先设置这两个缓存,因为我在高阶组件封装了公共方法,调用缓存到输入框的value里

,高阶组件返回的组件调用了这个方法

 

/*
* 高阶组件其实是一个函数,传进去的一个组件,返回一个新组件
* 实现不同组件中的逻辑复用,
* 将一些可以单独抽离的逻辑处理给要返回的新组件里面复用
* 然后将单独的组件,传递给新组件
* */

import React, {Component} from 'react'

import ReactDOM from 'react-dom'
//高阶组件定义,里面return 返回新组件
function local(Comp,key){
    class Proxy extends Component{
        //constructor构造函数 定义你的状态
        constructor(){
            super();
            this.state={data:''}
        }
        //钩子函数,组件渲染之前
        componentWillMount(){
        //取缓存值
            let data=localStorage.getItem(key);
            this.setState({data})
        }
        handBlur=(event)=>{
      //获取当前标签的value let data
=event.target.value; localStorage.setItem(key,data); } render(){ //Comp是传入进来的组件 return( <Comp handBlur={this.handBlur} data={this.state.data}/> ) } } return Proxy } //定义你的单独组件 function Input(props) { return <input type="text" defaultValue={props.data} onBlur={props.handBlur}/> } function Textareas(props) { return <textarea defaultValue={props.data}></textarea> } function Div() { return <div>111</div> } //调用高阶函数,返回新的组件 let LocalInput=local(Input,'username') let LocalTextareas=local(Textareas,'content') let LocalDiv=local(Div) //要渲染的总组件 class From extends Component { render() { return ( <div> <form> 用户名 <LocalInput/> 类容 <LocalTextareas/> <LocalDiv></LocalDiv> </form> </div> ) } } ReactDOM.render(<From></From>,document.querySelector("#root"))

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue父组件中获取子组件中的数据

下一篇:vue获取DOM元素并设置属性