在项目开发过程中,由于React16.8版本开始支持函数组件,出现了hooks的用法,但是hooks只能在函数组件中使用。
而我们的项目中同时存在class组件,有时由于需要或者不想重构大改代码,我们需要使类组件支持使用hooks。
可以使用高阶函数做一层壳子来实现,以Form
组件为例
import React from 'react' import {Form} from 'antd' class App extends React.Component { constructor(props) { super(props); } render() { const {form} = this.props; retuen <Form form={form}>{...}</Form> } } const withFormInClass = Component => porps => { const [form] = Form.useForm(); return <Component form={form} {...props} /> } const AppWithForm = withFormInClass(App); export default AppWithForm;
以上代码便是在类组件中使用hooks的方式,通过高阶函数把hooks当做参数传递进入组件,在组件中通过props取值使用。