);
}
```
### 通过 id 使用模式
您也可以通过 id 控制一个很好的模式 :
```js
import NiceModal from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal'; // created by above code
// If use by id, need to register the modal component.
// Normally you create a modals.js file in your project
// and register all modals there.
NiceModal.register('my-antd-modal', MyAntdModal);
function App() {
const showAntdModal = () => {
// Show a modal with arguments passed to the component as props
NiceModal.show('my-antd-modal', { name: 'Nate' })
};
return (
Nice Modal Examples
);
}
```
### 用钩子模式
这个 `useModal` 钩子不仅可以在模式组件内使用,也可以通过传递方式代号/组件来使用:
```jsx
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
//...
```
### 宣布您的模式而不是 `register`
你创造的优雅模式组件也可以被JSX用作普通组件,那么你不需要注册. 例如:
```jsx
import NiceModal, { useModal } from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal'; // created by above code
function App() {
const showAntdModal = () => {
// Show a modal with arguments passed to the component as props
NiceModal.show('my-antd-modal')
};
return (
Nice Modal Examples
);
}
```
有了这个方法,你可以得到优雅:
- 继承 在某些组件节点下的模式组件中发生上下文 .
- 通过道具将参数传递到模式组件.
> 注:如果以 id 方式显示组件,但模式不宣布或登记。 只会在Dev控制台发出警告.
### 使用承诺 API
除了使用道具从母元件中与模式进行交互外,通过承诺也可以更容易地实现. 例如,我们有一个用户列表页面,其中包含一个添加用户按钮,以显示一个对话框来添加用户. 在用户被添加后,列表应该刷新自己以反映变化,然后我们可以使用下面的代码:
```jsx
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
});
```
您可以在代码和框上看到现场实例.
### 与 Redux 合并
尽管没有必要,但可以集成Redux来管理好模式状态. 然后可以使用Redux dev工具来跟踪/调试模式的状态变化. 这是如何做到的:
```jsx
// First combine the reducer
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
import NiceModal from '@ebay/nice-modal-react';
import { Button } from 'antd';
import { MyAntdModal } from './MyAntdModal';
import logger from 'redux-logger';
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 (
{children}
);
};
export default function ReduxProvider({ children }) {
return (
{children}
);
}
```
### 使用任何 UI 库
NiceModal提供生命囊方法来管理模式状态. 您可以使用模式处理器返回 `useModal` 钩子将任何类似组件的模式绑入状态。 以下是您将使用的典型状态和方法:
- **模式. 可见**:一种模式的能见度.
- **模式. hide**:将隐藏模式,即更改 `modal.visible` 以假相报.
- **模式. 移动**: 从树上去除模式组件, 以便您模式的代码在不可见时不被执行 。 通常在模式的过渡后称为这种方法.
- **模式. 保持流动** 如果您不想在某些情况下从树上移除模式, 您可以决定是否调用 `modal.remove` 基于数值 `keepMounted`。 。 。 .
基于这些属性/方法,您可以轻松地使用由任何UI库提供的任何模式式组件.
### 使用帮助方法
如你所见,我们使用类似下面的代码来管理模式状态:
```jsx
//...
const modal = useModal();
return (
modal.hide()}
onCancel={() => modal.hide()}
afterClose={() => modal.remove()}
>
Hello NiceModal!
);
//...
```
它的束缚 `visible` 属性 `modal` 处理器,和使用 `modal.hide` 来隐藏关闭按钮时的模式。 在接近过渡后,它呼唤 `modal.remove` 从多姆节点中删除模式.
对于每一个模式的实施,我们总是需要用人工方式进行这些约束。 因此,为了更容易使用,我们为3个受欢迎的UI库材料UI,Ant.Design和Bootstrap React提供了帮助方法.
```jsx
import NiceModal, {
muiDialog,
muiDialogV5,
antdModal,
antdModalV5,
antdDrawer,
antdDrawerV5,
bootstrapDialog
} from '@ebay/nice-modal-react';
//...
const modal = useModal();
// For MUI