react 高阶组件
高阶组件的概念来自于高阶函数————可以接受函数作为参数/返回值的函数。
高阶组件就是可以接受组件作为参数,返回组件的函数。
用法很多,不过可读性较差。
一般会这样用:
实现判断权限,决定返回什么组件。
实现数据处理之后再传递给(要被返回的)组件。
实现装饰器模式的功能。
实现数据请求和组件的分离。
import React from 'react';
import ReactDom from 'react-dom';
function decorator (comp: React.FC<ComponentProps>) {
// 返回组件
return class newComp extends React.Component<ComponentProps, State>{
state = { value: this.props.something.toUpperCase()}
render() {
return <comp value={this.state.value} />
}
}
}
const myInput = (props: ComponentProps) =>{
return <input defaultValue={props.value} />
}
// 组件参数
newComp = decorator(myInput)
ReactDom.render(<newComp something={'something'}/>, document.querySelector('#id'))