ant-design/components/app/index.zh-CN.md
黑雨 db4ee53ffa
feat : new components app (#39046)
* feat : new components app

* feat: update app

* feat: update app

* feat: update app

* feat: update app

* feat: update app

* feat: update app

* feat: update app

* feat: update style

* feat: update style

* feat: update style

* feat: add style

* chore: code clean

* feat: add prefixCls

* chore: update snapshot

* chore: update snapshot

* chore: update snapshot

* test: image test

* Update components/app/index.zh-CN.md

Co-authored-by: afc163 <afc163@gmail.com>

* feat : update for reviewer

* feat: update

* feat: update

* feat: update snap

Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
2022-12-06 17:45:10 +08:00

1.2 KiB

category subtitle group title cover demo
Components 包裹组件 其他 App https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg
cols
2

新的包裹组件,提供重置样式和提供消费上下文的默认环境。

何时使用

  • 提供可消费 React context 的 message.xxxModal.xxxnotification.xxx 的静态方法,可以简化 useMessage 等方法需要手动植入 contextHolder 的问题。
  • 提供基于 .ant-app 的默认重置样式,解决原生元素没有 antd 规范样式的问题。

代码演示

message notification modal

How to use

import React from 'react';
import { App } from 'antd';
const MyPage = () => {
  const { message, notification, modal } = App.useApp();
  message.success('Good!');
  notification.info({ message: 'Good' });
  modal.warning({ title: 'Good' });
  // ....
  // other message,notification,modal static function
  return <div>Hello word</div>;
};

const MyApp = () => (
  <App>
    <MyPage />
  </App>
);