React弹窗使用最佳实践 - @ebay/nice-modal-react

我愿称之为 目前遇到的最佳的弹窗使用方案。

@ebay/nice-modal-react 是一个由eBay团队开发和维护的React组件库，主要用于实现模态对话框（Modal）功能。

该库的目标是简化模态窗口的管理和展示，提供了一种不同于传统模态实现的思维方式。

@ebay/nice-modal-react

github.com/eBay/nice-m…

这是一个小型的、零依赖的实用程序，用于以 React 的自然方式管理模态。 它使用上下文全局保存模态状态，以便您可以通过模态组件或 id 轻松显示/隐藏模态。

注意： @ebay/nice-modal-react 不是 React 模态组件，但应该通过 UI 库（如 Material UI、Ant.Design、Bootstrap React等）与其他模态/对话框实现一起使用。

优势

1. 易用性：nice-modal-react 提供了一种声明式的编程模型，使得开发者能够快速创建和控制模态窗口。它的设计注重于简化复杂的模态交互逻辑，如模态间的依赖和顺序展示，这对于需要处理多层或条件弹出窗口的应用来说特别有用。

2. 集成度：作为eBay官方出品的库，nice-modal-react 在大型项目和企业级应用中得到了验证，这意味着它在与React生态系统其他部分的集成、性能和稳定性方面通常会有较好的表现。

总之，@ebay/nice-modal-react 是一个针对模态窗口设计的高效且灵活的解决方案，特别适合需要处理复杂模态逻辑的应用。

安装

# with yarn
yarn add @ebay/nice-modal-react

# or with npm
npm install @ebay/nice-modal-react

创建模态组件 定义业务弹窗

import { Modal } from 'antd';
import NiceModal, { useModal } from '@ebay/nice-modal-react';

export default NiceModal.create(({ name }: { name: string }) => {
  // Use a hook to manage the modal state
  const modal = useModal();
  return (
   <Modal
    title="Hello Antd"
    onOk={() => modal.hide()}
    visible={modal.visible}
    onCancel={() => modal.hide()}
    afterClose={() => modal.remove()}
   >
    Hello {name}!
   </Modal>
  );
});

它将 visible 属性绑定到处理程序， modal 并用于 modal.hide 在单击关闭按钮时隐藏模式。 在关闭动画结束之后，它调用 modal.remove 从 dom 节点中删除模态。

全局注册提供者

使用 NiceModal.Provider 嵌入应用程序:

import NiceModal from '@ebay/nice-modal-react';

ReactDOM.render(
  <React.StrictMode>
   <NiceModal.Provider>
    <App />
   </NiceModal.Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);

与任何 UI 库一起使用 （比如Antd）

import NiceModal, {
  muiDialog,
  muiDialogV5,
  antdModal,
  antdModalV5,
  antdDrawer,
  antdDrawerV5,
  bootstrapDialog
} from '@ebay/nice-modal-react';

//...
const modal = useModal();
// For MUI
<Dialog {...muiDialog(modal)}>

// For MUI V5
<Dialog {...muiDialogV5(modal)}>

// For ant.design
<Modal {...antdModal(modal)}>

// For ant.design v4.23.0 or later
<Modal {...antdModalV5(modal)}>

// For antd drawer
<Drawer {...antdDrawer(modal)}>

// For antd drawer v4.23.0 or later
<Drawer {...antdDrawerV5(modal)}>

// For bootstrap dialog
<Dialog {...bootstrapDialog(modal)}>

业务中使用

import NiceModal from '@ebay/nice-modal-react';
import MyModal from './MyModal';

//...
NiceModal.show(MyModal, { someProp: 'hello' }).then(() => {
  // do something if the task in the modal finished.
});
//...

import NiceModal, { useModal } from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal'; // created by above code

NiceModal.register('my-antd-modal', MyAntdModal);
//...
// if use with id, need to register it first
const modal = useModal('my-antd-modal');
// or if with component, no need to register
const modal = useModal(MyAntdModal);

//...
modal.show({ name: 'Nate' }); // show the modal
modal.hide(); // hide the modal
//...

高级用法

Using promise API

例如，我们有一个带有添加用户按钮的用户列表页面，用于显示添加用户的对话框。 添加用户后，列表应该刷新自身以反映更改，然后我们可以使用以下代码:

NiceModal.show(AddUserModal)
  .then(() => {
   // When call modal.resolve(payload) in the modal component
   // it will resolve the promise returned by `show` method.
   // fetchUsers will call the rest API and update the list
   fetchUsers()
  })
  .catch(err => {
   // if modal.reject(new Error('something went wrong')), it will reject the promise
  });

踩坑记录

NiceModal 弹窗中获取不到store，确认一下是否是store包裹了弹窗

store的Provider要包裹住 NiceModal.Provider,弹窗中才可以获取到store中的数据

// First combine the reducer
import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';
import NiceModal from '@ebay/nice-modal-react';
import { Button } from 'antd';
import logger from 'redux-logger';
import { MyAntdModal } from './MyAntdModal';

const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
const enhancer = composeEnhancers(applyMiddleware(logger));

const store = createStore(
  combineReducers({
   modals: NiceModal.reducer,
   // other reducers...
  }),
  enhancer,
);

// Passing Redux state to the nice modal provider
const ModalsProvider = ({ children }) => {
  const modals = useSelector((s) => s.modals);
  const dispatch = useDispatch();
  return (
   <NiceModal.Provider modals={modals} dispatch={dispatch}>
    {children}
   </NiceModal.Provider>
  );
};

export default function ReduxProvider({ children }) {
  return (
   <Provider store={store}>
    <ModalsProvider>{children}</ModalsProvider>
   </Provider>
  );
}

modal.hide()只是隐藏模态窗，之前的数据还是会保存，若不想保存，请使用 modal.remove()

modal.remove() - 从树中删除模态组件，以便在模态代码不可见时不执行。

通常，在模态动画结束后调用此方法

vue同类组件 vue-nice-modal

使用说明具体可参考大佬的这篇文章

Vue Nice Modal：让你的 Modal 调用更轻松