react-高阶组件

时间:2022-05-19 00:10:51

1、高阶组件就是一个函数,传给它参数(包括组件,变量等),它返回一个新的组件

2、列如现在有这么个高阶组件,根据传入的参数name,从而从localstore中获得这个name的值,然后更新到传入的参数component(组件)中去

wrapWithLoadData.js文件的代码:

import Rect ,{component} from "react"

export default (WrappedComponent,name)=>{       (WrappedComponent为传进来的组件,name为传进来的参数)

class NewComnent extends Component {  //定一个组件来为传进来的组件进行数据处理

constructor(){

super()

this.state={data:null}

}

componentWillMount(){

let data = localStorage.getItem(name)

this.setState({ data })

}

render () {

return <WrappedComponent data={this.state.data} />//高阶组件内部的包装组件和被包装组件之间通过 props 传递数据。

}

}

return NewComponent    //返回经过数据处理的组件(其实就是作为参数传进来的组件)

}

这就是一个高阶组件,当某个组件要从localstore中获值时,就可以将这个组件作为参数传进来。

2、列:有一个组件InputWithUserName要用到上面的高阶组件(即从localstore中获取数据)

import wrapWithLoadData from './wrapWithLoadData'  //获得高阶组件

class InputWithUserName extends Component {

render () {

return <input value={this.props.data} />//高阶组件内部的包装组件和被包装组件之间通过 props 传递数据。

}

}

InputWithUserName=wrapWithLoadData (InputWithUserName ,“username”)//将组件InputWithUserName作为参数传入高阶组件,到高阶组件中经过处理数据后再将其返回

export default InputWithUserName

3、如何用这个InputWithUserName组件

import InputWithUserName from './InputWithUserName'

class Index extends Component {

render () {

return ( <div> 用户名:<InputWithUserName /> </div> )

}

}

别人用这个组件InputWithUserName的时候实际是用了被加工过的组件。

如果现在我们需要另外一个文本输入框组件,它也需要 LocalStorage 加载'content' 字段的数据。我们只需要定义一个新的 TextareaWithContent

import wrapWithLoadData from './wrapWithLoadData'

class TextareaWithContent extends Component {
render () {
return <textarea value={this.props.data} />
}
} TextareaWithContent = wrapWithLoadData(TextareaWithContent, 'content')
export default TextareaWithContent

只用于自己学习记录