在React 16.4 以后呢相信大家也都开始使用Hook编程,快组件通讯呢也有使用到了Context这个API,但是很多小伙伴对于Context使用呢还是不是很熟悉,接下来我就把我开发中怎样使用Context的方法给大家。
1.首先我们在所需要的共享的数据文件夹下新建一个xxxContext(如:dataContext.js)
import React from 'react'
export const EditableContext = React.createContext(null);
这里面当然就像Redux一样可以导出很多个Context
2.创建好了Context 那我们就把需要共享的数据给存到Context中,这个个用到了Context.Provider 方法
import React from 'react'
import { Form,} from 'antd'
import{ EditableContext } from '../EditableContext'
const EditableRow = ({ index, ...props }) => {
const [form] = Form.useForm();
return (
<Form form={form} component={false}>
<EditableContext.Provider value={form}>
<tr {...props} />
</EditableContext.Provider>
</Form>
);
};
export default EditableRow;
3.在使用的时候我们就引入相应的Context文件夹
import { EditableContext } from '../EditableContext'
const EditableCell = ({
title,
editable,
children,
dataIndex,
record,
handleSave,
...restProps
}) => {
const form = useContext(EditableContext);
...这样就可以了
form.setFieldsValue({
[dataIndex]: record[dataIndex],
});