前言
本文章目前是用来记录当时用来解决问题的方案,并不是很完善,也不是很复杂,所以不做详解了。等有时间再整理重新编写,欢迎大佬帮忙完善。
目的
解决context和dva-readux的冲突,目前没有调研是不是dva二次封装导致的
//index.js
import dva from 'dva';
import createLoading from 'dva-loading';
const app = dva();
// 使用loading中间件
app.use(createLoading());
app.model();
app.router(require('./router').default);
app.start('#root');
// 这里输出store
export default app._store;
// context.js
import React from 'react';
import PropTypes from 'prop-types';
import store from 'src/index';
const ContextComponent = props => {
/*
props params
context: React.createContext 必填
defaultData: Any 必填
children: ReactNode
dataName: String 可选
changeFuncName: String 可选
*/
const {
context = React.createContext(),
defaultData = {},
children,
dataName = 'contextData',
changeFuncName = 'contextChange',
} = props;
const [data, setData] = React.useState(defaultData);
const { Provider } = context;
return (
<Provider
value={{
[dataName]: data,
[changeFuncName]: setData,
}}
>
{children}
</Provider>
);
};
ContextComponent.propTypes = {
context: PropTypes.object.isRequired,
defaultData: PropTypes.any.isRequired,
children: PropTypes.node.isRequired,
dataName: PropTypes.string,
changeFuncName: PropTypes.string,
};
export default ContextComponent;
// 解决使用context包装后无法读取context数据
export const Subscription = (context, dataName = 'contextData') => {
const { Consumer } = context;
return Element => props =>
(
<Consumer>
{contextData => {
const mergeProps = {
...props,
[dataName]: contextData,
};
return <Element {...mergeProps} />;
}}
</Consumer>
);
};
// 使用方式
import React from 'react';
const defaultData = {}
const context = React.createContext(defaultData);
<ContextComponent conetxt={context} defaultData={defaultData}>
<Ancestor />
</ContextComponent>
// 后代组件使用
export default Subscription(context)(connect()(MyComponent))
后话
是否支持多个context同时使用,未做测试。
等有时间会进一步改善,希望各位大佬不吝赐教。也希望能让遇到这种问题的人有一丝启发。