可观察对象如何与模态框协作
以组件PriceAlertModal为例,观察Modal与可观察对象的结合使用
src\common\reactModules\priceAlertModal\components\priceAlertModal.tsx
组件期待接受一个可观察对象priceAlertSubject$
属性
const PriceAlertModal = (props: ModalProps) => {
const { ..., priceAlertSubject$, ... } = props;
在钩子中调用可观察对象的.subscribe()来定义"如何响应流事件"
const [showModal, toggleModal] = useState(false); // 还可以有众多的state
useEffect(() => {
priceAlertSubject$.subscribe(({props})=>{
/* cosnt {propA} = props; setStateA(propA) */
});
}, []);
此处还用了一个公用组件:
import Dialog from '@ctrip/ibu-flight-pc-component/lib/reactUI/dialog'; /* use client */
return (
<>
<If condition={showModal}>
<Dialog ...propsDialog>
<ModalContent ...propsModal/>
</Dialog>
</If>
</>
);
希望使用此组件时,在外层创建可观察对象priceAlertSubject$
,这个对象可以被多个具体组件接受以及发送事件,也就是说这个模态框也是一种单例
const priceAlertSubject$ = useMemo(() => new Subject<any>(), []);
useEffect(() => {
return () => {
priceAlertSubject$.unsubscribe();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
在具体组件内部,调用可观察对象的next()产生流事件,使PriceAlertModal感知到内容变化
import { PriceAlertModal,...} from '@reactModules/priceAlertModal';
const openEditModal = () => {
someData &&
priceAlertSubject$.next({
...
operateType: EOperateType.Edit,
basicData: someData,
...
});
};
const openSubscribeModal = () => {
someData &&
priceAlertSubject$.next({
...
operateType: EOperateType.Subscribe,
basicData: someData,
...
});
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)