App包裹组件

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

何时使用

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

代码演示

获取 message, notification, modal 静态方法。

TypeScript
JavaScript
import React from 'react';
import { App, Button, Space } from 'antd';

// Sub page
const MyPage = () => {
  const { message, modal, notification } = App.useApp();

  const showMessage = () => {
    message.success('Success!');
  };

  const showModal = () => {
    modal.warning({
      title: 'This is a warning message',
      content: 'some messages...some messages...',
    });
  };

  const showNotification = () => {
    notification.info({
      message: `Notification topLeft`,
      description: 'Hello, Ant Design!!',
      placement: 'topLeft',
    });
  };

  return (
    <Space>
      <Button type="primary" onClick={showMessage}>
        Open message
      </Button>
      <Button type="primary" onClick={showModal}>
        Open modal
      </Button>
      <Button type="primary" onClick={showNotification}>
        Open notification
      </Button>
    </Space>
  );
};

// Entry component
export default () => (
  <App>
    <MyPage />
  </App>
);

如何使用

基础用法

App 组件通过 Context 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。

import { App } from 'antd';
import React from 'react';

const MyPage: React.FC = () => {
  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: React.FC = () => (
  <App>
    <MyPage />
  </App>
);

export default MyApp;

注意：App.useApp 必须在 App 之下方可使用。

与 ConfigProvider 先后顺序

App 组件只能在 ConfigProvider 之下才能使用 Design Token，如果需要使用其样式重置能力，则 ConfigProvider 与 App 组件必须成对出现。

<ConfigProvider theme={{ ... }}>
  <App>
    ...
  </App>
</ConfigProvider>

内嵌使用场景（如无必要，尽量不做嵌套）

<App>
  <Space>
    ...
    <App>...</App>
  </Space>
</App>

全局场景（redux 场景）

// Entry component
import { App } from 'antd';
import type { MessageInstance } from 'antd/es/message/interface';
import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
import type { NotificationInstance } from 'antd/es/notification/interface';

let message: MessageInstance;
let notification: NotificationInstance;
let modal: Omit<ModalStaticFunctions, 'warn'>;

export default () => {
  const staticFunction = App.useApp();
  message = staticFunction.message;
  modal = staticFunction.modal;
  notification = staticFunction.notification;
  return null;
};

export { message, notification, modal };

// sub page
import { Button, Space } from 'antd';
import React from 'react';
import { message } from './store';

export default () => {
  const showMessage = () => {
    message.success('Success!');
  };

  return (
    <Space>
      <Button type="primary" onClick={showMessage}>
        Open message
      </Button>
    </Space>
  );
};

API

App

参数	说明	类型	默认值	版本
message	App 内 Message 的全局配置	MessageConfig	-	5.3.0
notification	App 内 Notification 的全局配置	NotificationConfig	-	5.3.0

import React from 'react'; import { App, Button, Space } from 'antd'; // Sub page const MyPage = () => { const { message, modal, notification } = App.useApp(); const showMessage = () => { message.success('Success!'); }; const showModal = () => { modal.warning({ title: 'This is a warning message', content: 'some messages...some messages...', }); }; const showNotification = () => { notification.info({ message: `Notification topLeft`, description: 'Hello, Ant Design!!', placement: 'topLeft', }); }; return ( <Space> <Button type="primary" onClick={showMessage}> Open message </Button> <Button type="primary" onClick={showModal}> Open modal </Button> <Button type="primary" onClick={showNotification}> Open notification </Button> </Space> ); }; // Entry component export default () => ( <App> <MyPage /> </App> );

如何使用

基础用法

App 组件通过 Context 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。

import { App } from 'antd';
import React from 'react';

const MyPage: React.FC = () => {
  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: React.FC = () => (
  <App>
    <MyPage />
  </App>
);

export default MyApp;

注意：App.useApp 必须在 App 之下方可使用。

与 ConfigProvider 先后顺序

App 组件只能在 ConfigProvider 之下才能使用 Design Token，如果需要使用其样式重置能力，则 ConfigProvider 与 App 组件必须成对出现。

<ConfigProvider theme={{ ... }}>
  <App>
    ...
  </App>
</ConfigProvider>

内嵌使用场景（如无必要，尽量不做嵌套）

<App>
  <Space>
    ...
    <App>...</App>
  </Space>
</App>

全局场景（redux 场景）

// Entry component
import { App } from 'antd';
import type { MessageInstance } from 'antd/es/message/interface';
import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
import type { NotificationInstance } from 'antd/es/notification/interface';

let message: MessageInstance;
let notification: NotificationInstance;
let modal: Omit<ModalStaticFunctions, 'warn'>;

export default () => {
  const staticFunction = App.useApp();
  message = staticFunction.message;
  modal = staticFunction.modal;
  notification = staticFunction.notification;
  return null;
};

export { message, notification, modal };

// sub page
import { Button, Space } from 'antd';
import React from 'react';
import { message } from './store';

export default () => {
  const showMessage = () => {
    message.success('Success!');
  };

  return (
    <Space>
      <Button type="primary" onClick={showMessage}>
        Open message
      </Button>
    </Space>
  );
};

参数

说明

类型

默认值

版本

message

App 内 Message 的全局配置

MessageConfig

5.3.0

notification

App 内 Notification 的全局配置

NotificationConfig

5.3.0