Javascript

React Hooks在class组件中的使用方式

本文主要是介绍React Hooks在class组件中的使用方式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

使用背景

在项目开发过程中,由于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取值使用。

这篇关于React Hooks在class组件中的使用方式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!